I have tried the example and it works.

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 “InputFile” component and can get the file using “inputElem.files[0]” in javascript.

My question is if using “FluentInputFile” 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)

Seems can not use inputElem.files[0] in javascript if using “FluentInputFile”