How to disable the Browse button while uploading file in Blazor File Upload

[Syncfusion Support]

Answer:

We can disable the browse button on file uploading action in the progressing event with help of using JS interop since we could not access the DOM element in the razor file as mentioned in the below code example.

[Index.razor]

@page "/"

@using Syncfusion.Blazor.Inputs

<SfUploader ID="UploadFiles">

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

<UploaderEvents OnRemove="onFileRemove" Progressing="OnStart">UploaderEvents>

SfUploader>

@code{

[Inject]

protected IJSRuntime JsRuntime { get; set; }

public async Task OnClick()

{

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

}

public void onFileRemove(RemovingEventArgs args)

{

args.PostRawFile = false;

}

public async Task OnStart()

{

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

}

}

[wwwroot/fileupload.js]

window.OnUpload = (id) => {

document.querySelectorAll(".e-btn.e-upload-browse-btn")[0].classList.add("e-disabled");

document.querySelectorAll(".e-btn.e-upload-browse-btn")[0].style.pointerEvents = "none";

}

Find the sample for disabling the Browse button while uploading in Blazor File Upload from here.

[Guilherme Cremasco]

Hello!

Suppose there are more than one Uploader component. Is there a way to disable just the button for one of the components, according to its ID?

[Mallesh Ravi Chandran]

Hi , 

To better assist you , we recommend passing the ID of the SfUploader component as an additional parameter to the Progressing event. This will allow you to retrieve the ID of the uploader being used. With this ID, you can disable the upload button for a specific SfUploader component .

@using Syncfusion.Blazor.Inputs

<p>SfUploader : 1</p>

<SfUploader ID="UploadFiles1">

    <UploaderEvents OnRemove="onFileRemove" Progressing="@(args => OnStart(args, "UploadFiles1"))"></UploaderEvents>

    <UploaderAsyncSettings SaveUrl=https://blazor.syncfusion.com/services/production/api/FileUploader/Save RemoveUrl=https://blazor.syncfusion.com/services/production/api/FileUploader/Remove></UploaderAsyncSettings>

</SfUploader>

<p>SfUploader : 2</p>

<SfUploader ID="UploadFiles2">

    <UploaderEvents OnRemove="onFileRemove" Progressing="@(args => OnStart(args, "UploadFiles2"))"></UploaderEvents>

    <UploaderAsyncSettings SaveUrl=https://blazor.syncfusion.com/services/production/api/FileUploader/Save RemoveUrl=https://blazor.syncfusion.com/services/production/api/FileUploader/Remove></UploaderAsyncSettings>

</SfUploader>

 

@code {

    [Inject]

    protected IJSRuntime JsRuntime { get; set; }

    public async Task OnStart(Syncfusion.Blazor.Inputs.ProgressEventArgs args, string uploaderId)

    {

        await JsRuntime.InvokeVoidAsync("OnUpload", uploaderId);

    }

}

 

window.OnUpload = (id) => {

     const uploaderInput = document.getElementById(id);

     if (uploaderInput) {

         const uploaderDiv = uploaderInput.closest('.e-upload');

         if (uploaderDiv) {

             const browseButton = uploaderDiv.querySelector(".e-btn.e-upload-browse-btn");

             if (browseButton) {

                 browseButton.classList.add("e-disabled");

                 browseButton.style.pointerEvents = "none";

             }

         }

     }

 }

 

1. Get the uploader input element by its ID.

2. Use the closest method to get the closest parent div with the class e-upload.

3. Disable the browse button within that div.

We have also provided a sample for your reference. Please review the sample and if you have any concerns, please get back to us . 

Regards, 

Mallesh

Attachment: Uploader_d0df6653.zip

[Guilherme Cremasco]

Hi Mallesh!

Thank you very much! Your sample helped me a lot!

[Shereen Shajahan]

Hi

We are marking this as solved. Please get back to us for assistance in the future.

Regards,

Shereen