Replace <InputFile> with <FluentInputFile>, got "Microsoft.JSInterop.JSException: Cannot read properties of undefined"

[andrewwang1tw]

I have tried the [Microsoft Upload image preview example] (https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0#upload-image-preview) and it works fine. The example code below

The blazor code

@page "/file-upload-4"
@inject IJSRuntime JS

<h1>File Upload Example</h1>
<InputFile @ref="inputFile" OnChange="ShowPreview" />
<img style="max-width:200px;max-height:200px" @ref="previewImageElem" />

@code {
    private InputFile? inputFile;
    private ElementReference previewImageElem;

    private async Task ShowPreview() => await JS.InvokeVoidAsync("previewImage", inputFile!.Element, previewImageElem);
}

The javascript

 window.previewImage = (inputElem, imgElem) => {
  const url = URL.createObjectURL(inputElem.files[0]);
  imgElem.addEventListener('load', () => URL.revokeObjectURL(url), { once: true });
  imgElem.src = url;
}

The example uses blazor built-in "InputFile" component and can get the file via "inputElem.files[0]" in javascript.

My question is if using "[FluentInputFile] (https://www.fluentui-blazor.net/InputFile)" then "inputElem.files[0]" failed with below message

Error: Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading '0')
TypeError: Cannot read properties of undefined (reading '0')
    at window.previewImage (CreateProduct.js:3:52)

It seems you cannot use inputElem.files[0] in javascript if using "FluentInputFile". But what is the equivalent?

From the debug screen (as attached), if using the blazor built-in component "InputFile", I can see the "inputElem.files". If using "FluentInputFile", not the "inputElem.files".

Thanks.

[dvoituron]

Can you use <FluentInputFile Id="my-id" and get a reference to the InputFile element using the JavaScript document.getElementById('my-id')

I think that the @ref doesn't reference the InputFile element.

[andrewwang1tw]

Yes, it works! THANKS!!!