Is it possible to initiate a File Upload browse event from an external Button

Answer:

Yes, We can open the file explorer from the external button click with help of calling JS interop file as mentioned in the below code example.

[index.razor]

<div id='dropArea'>

<div class="control_wrapper">

<button id='browse' @onclick="OnClick">Browsebutton>

<SfUploader @ref="UploadObj" ID="UploadFiles">

<UploaderAsyncSettings SaveUrl="https://ej2.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://ej2.syncfusion.com/services/api/uploadbox/Remove">UploaderAsyncSettings>

SfUploader>

div>

div>

@code{

SfUploader UploadObj;

[Inject]

protected IJSRuntime JsRuntime { get; set; }

public async Task OnClick()

{

await JsRuntime.InvokeVoidAsync("onClick", "UploadFiles");

}

}

[upload.js]

window.onClick = (id) => {

document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();

return false;


Find the sample to initiate a File Upload browse event from an external Button from here.

Loader.
Up arrow icon