How to custom UI File Upload

[Tien Pham]

i try using File Upload component, and i have 2 question

  1. How to custom text or button 'Browse...' (can remove, change button to text)
  2. How to create button (or div have event onClick like Browse) like Browse can open file explore for select file

2 question for this UI destination

[Tien Pham]

hello, please help me, i need help (urgent)

[Priyanka Karthikeyan]

Hi Tien Pham,

Thank you for reaching out to us.

 

Query1: "How to custom text or button 'Browse...' (can remove, change button to text)"

 

To customize the text for the Browse, Upload, and Clear buttons in the Blazor File Upload component, you can utilize the UploaderButtons property of the File Upload component. This allows for a more tailored user experience by replacing the default button labels with custom text.

Here is a code snippet demonstrating how to set custom text for the Browse, Upload, and Clear buttons:

<SfUploader AutoUpload="false">
    <UploaderButtons Browse="Custom Browse Text" Upload="Custom Upload Text" Clear="Custom Clear Text"></UploaderButtons>
</SfUploader>

 

For more details please refer the below KB article

https://support.syncfusion.com/kb/article/17457/customizing-button-text-in-blazor-file-upload-component

 

Query2: "How to create button (or div have event onClick like Browse) like Browse can open file explore for select file"

 

You can use the class e-upload-browse-btn to open the File Explorer and select files. Please refer to the code snippet and sample below for more information.

 

Index.razor

 

@inject IJSRuntime JSRuntime

 

 

<div class="upload-box">
    <div class="column row-gap-25px align-middle justify-content-center">
        <span class="fa-regular fa-cloud-arrow-up blue-icon"></span>
        <div class="column row-gap-5px font-12 medium align-middle mb-30">
            <span>Drag and Drop an Artifact here or</span>

 

            <!-- SfUploader component -->
            <SfUploader DropArea=".upload-box" ID="FileUploader" AllowMultiple="false" AllowedExtensions=".pdf, .xls, .xlsm, .xlsb, .csv" MaxFileSize="25000000" ShowFileList="false">
                <UploaderEvents  Created="createdHandler" ValueChange="OnChange"/>
            </SfUploader>

 

            <!-- Custom file select trigger -->
            <button class="select-file" id="custom-file-trigger">Choose File</button>
        </div>

 

        <div class="bottom-upload-content">
            <div class="column font-10 client-subtitle align-middle">
                <span>Supported formats: PDF, XLS</span>
                <span>Maximum size: 25MB</span>
            </div>
        </div>
    </div>
</div>
<style>
    /* Hide the default uploader button */
    .e-upload.e-control-wrapper {
        display: none;
    }

 

    /* Optionally hide the text "No files chosen" */
    .e-upload .e-file-select-wrap .e-file-drop {
        display: none;
    }

 

</style>

 

@code {
    public async Task createdHandler()
    {
        await JSRuntime.InvokeVoidAsync("created");
    }

 

    public void OnChange(UploadChangeEventArgs args)
    {
        
    }
}

 

JavaScript.js

 

function created() {
document.getElementsByClassName('select-file')[0].addEventListener('click', function () {
        document.querySelector('.e-upload-browse-btn').click()
    })
}

 

Regards,

Priyanka K

Attachment: Source_Samples_6b9104a9.zip