How show an image in Custom Field?

[onoboa]

Hello everynone,

I have 2 tables, personal_data and employee_data, I have a picture field in personal_data and when I select the personal_id from an lookup table in employee_data and want to autofill some custom fields, but the picture don’t shows, I get this error:

ew.js:7897 Uncaught InvalidStateError: Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only be programmatically set to the empty string.
at c (jquery.min.js?v=24.16.8:2:25304)
at Object.fireWith [as resolveWith] (jquery.min.js?v=24.16.8:2:26053)
at l (jquery.min.js?v=24.16.8:2:77782)
at XMLHttpRequest. (jquery.min.js?v=24.16.8:2:80265)

This is my custom field:

In database the field pic is an varchar(200)

Please someone to post an example

Best reggards,

Omar

[arbei]

@onoboa

Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only be programmatically set to the empty string.

As the error said, you cannot autofill a File Upload field.

[onoboa]

Then, what is the Best way to shows a pictures file when I select the personal_data ID?

Like this:

Thanks,

Omar

[yinsw]

I tested with this sample code for Add Page. Not sure if this is what you want.

Global → All Pages → Api_action

// API Action event
function Api_Action(RouteCollectorProxyInterface $app): void
{
    $app->get('/get-photo-by-id/{personalid}', function ($request, $response, $args) {
        $personalid = $args["personalid"] ?? null; // Get the input value
        $data = ExecuteRow("select PERSONAL_PHOTO from personal_data where personal_id='$personalid'");
        return $response->withJson($data); // Return Psr\Http\Message\ResponseInterface object 
    });    
}

Add/Copy Page → Client Script

$(document).ready(function () {
    $('#x_PERSONAL_ID').on('change', function () {
        const personalId = $(this).val();

        if (!personalId) {
            $("#x_PERSONAL_PHOTO").visible(false);
            $("#elh_EMPLOYEE_DATA_PERSONAL_PHOTO").visible(false);
            return;
        }

        // Construct URL using path parameter
        const apiUrl = `/api/get-photo-by-id/${encodeURIComponent(personalId)}`;
        $.ajax({
            url: apiUrl,
            method: 'GET',
            success: function (response) {
                try {
                    const data = typeof response === 'string' ? JSON.parse(response) : response;
                    if (data.PERSONAL_PHOTO) {
                        $("#x_PERSONAL_PHOTO").visible(true);
                        $("#elh_EMPLOYEE_DATA_PERSONAL_PHOTO").visible(true);
                        $('#x_PERSONAL_PHOTO').replaceWith(
                            `<img id="x_PERSONAL_PHOTO" src="uploads/${data.PERSONAL_PHOTO}" alt="Personal Photo" width="300px" height="300px" />`
                        );
                    } else {
                        $("#x_PERSONAL_PHOTO").visible(false);
                        $("#elh_EMPLOYEE_DATA_PERSONAL_PHOTO").visible(false);                        
                        alert("Photo not found.");
                    }
                } catch (e) {
                    $("#x_PERSONAL_PHOTO").visible(false);
                    $("#elh_EMPLOYEE_DATA_PERSONAL_PHOTO").visible(false);
                    alert("Invalid response format.");
                }
            },
            error: function () {
                $("#x_PERSONAL_PHOTO").visible(false);
                $("#elh_EMPLOYEE_DATA_PERSONAL_PHOTO").visible(false);
                alert('Could not retrieve photo.');
            }
        });
    });
});

Add/Copy Page → Startup Script

$("#x_PERSONAL_PHOTO").visible(false);

[kasidi]

maybe something like this.

<img class="profile-user-img img-fluid img-circle" src="<?= GetUrl("upload/") ?>{{: {{{dbvalue photo}}} }}">

[onoboa]

Hi everybody,

Thanks for your help, I get show the image in custome template Add.

Using api like the yinsw example.

Best reggards,

Omar