Styling the SfUploader

[Ditchford]

Hello

I am having problems understanding how to customize the appearance of the uploader component. I am aware of the cssclass property but cannot seem to make it work.  Things I am trying to do:

1. Change the appearance of the 'Browse button' to a material flat look ( i.e "e-btn e-outline  e-primary e-flat")

2. Change the word from "Browse" to "Upload"

3. Change the text in the drop area 

Do you have any examples?

Thank you.

Regards

[Ponmani Murugaiyan]

Hi Ditchford, 

Greetings from Syncfusion support. 

Query1: Change the appearance of the 'Browse button' to a material flat look ( i.e "e-btn e-outline  e-primary e-flat"). 

 

We have prepared the sample based on the requested requirement by using JS interop and customized the uploader browse button by adding the corresponding class, since we could not access the DOM elements in the Blazor platform. You can achieve in the created event as like below code snippet. 

<SfUploader ID="uploader" AutoUpload="false"> 

    <UploaderEvents ValueChange="OnFileUploaderValueChange" Created="onCreate"></UploaderEvents> 

</SfUploader> 

 

@code { 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

 

    SfUploader sfUloaderCompRef { get; set; } 

    public async Task onCreate() 

    { 

        await JsRuntime.InvokeVoidAsync("create", "uploader"); 

    } 

    ... 

} 

   

[wwwroot/Uploader.js] 

 

window.create = (id) => { 

    var element = document.getElementsByClassName('e-upload')[0].querySelector('.e-upload-browse-btn'); 

    element.classList.add.apply( 

        element.classList, ["e-outline", "e-primary", "e-flat"] 

    ) 

}  

 

Query 2: Change the word from "Browse" to "Upload". 

 

We would like to know you that, for changing the name of action buttons (Browse or Upload or Cancel). You can achieve using the uploadButtonPoprs tag as like below. 

<SfUploader ID="uploader" AutoUpload="false"> 

    <UploaderEvents ValueChange="OnFileUploaderValueChange" Created="onCreate"></UploaderEvents> 

    <UploaderButtonsProps Browse="Upload"></UploaderButtonsProps> 

</SfUploader> 

Query3: Change the text in the drop area. 

 

If you would like to change the static text other than action buttons, need to achieve using localization of File Upload component. Add .resx file to Resource folder and enter the key value (Locale Keywords) in the Name column and the translated string in the Value column as follows. Please find the documentation below for reference. 

https://blazor.syncfusion.com/documentation/file-upload/localization/ 

 

 

 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerSideLocaliation1878676568 

 

Kindly check with the above suggestion to meet your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M