Provide a Way to specify CssClass for the Upload Button

Question

It would be great to have a CssClass Property to specify a class for the buttonsI'm currently using this Uploader: The result is: I would like to set the button as a e-primary and e-outlineInfact it would be great to have a Template Area for the buttons, so I can Add another button aside the existent

Deepak Ramakrishnan · Answer

Hi Daniel, 
 
Greetings from Syncfusion support. 
 
Query 1: I would like to set the button as a e-primary and e-outline 
 
Yes we can achieve the requirement by overriding the existing button styles . Kindly refer the below styles and sample for your reference. 
[Sanpshot] 




  
 
<style> 




.e-upload .e-file-select-wrap .e-btn { 
                background-color: transparent; 
                border-color: #e3165b; 
                color: #e3165b; 
            } 
 
        .e-upload .e-file-select-wrap .e-btn:hover { 
            background-color: #e3165b; 
            border-color: #e3165b; 
            color: white; 
        } 
 
Sample Link :  https://www.syncfusion.com/downloads/support/forum/169867/ze/BlazorApp18239388  
 
Query 2 : Infact it would be great to have a Template Area for the buttons, so I can Add another button aside the existent 
 
Yes we can achieve it by using Uploader template feature instead of button template (No built-in support for the requirement) .So we request you to provide the use case or requirement details elaborately to proceed further  in our end. 
 
 
API documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderTemplates.html  
 
 
Thanks, 
Deepak R.

Daniel · Answer

"Yes we can achieve the requirement by overriding the existing button styles . Kindly refer the below styles and sample for your reference. "

I think that's not exactly a solution, the e-primary colors are defined in a scss (sass) file (Theme) I don't want to statically set the colors, I want to use the Css Class already defined.

The template area for the buttons is a suggestion as a solution for the problem, as If I can put my own button and on click method call @ref.Upload or @ref.Clear (would use a Ref to the SfUploader object)

But the template is just a suggestion, setting a CssClass for each button would be more straight forward

Deepak Ramakrishnan · Answer

Hi Daniel, Thanks for your update. Query 1 : I think that's not exactly a solution, the e-primary colors are defined in a scss (sass) file (Theme) I don't want to statically set the colors, I want to use the Css Class already defined. For your information , The value provided in the CssClass property will get added to the parent component , Hence by using the property we can specify the uploader component if multiple components used in the same page of the application . So we request you to use the styles as mentioned in the previous update (Also mentioned below). .e-upload .e-file-select-wrap .e-btn { background-color: transparent; border-color: #e3165b; color: #e3165b; } .e-upload .e-file-select-wrap .e-btn:hover { background-color: #e3165b; border-color: #e3165b; color: white; } Query 2 : The template area for the buttons is a suggestion as a solution for the problem, as If I can put my own button and on click method call @ref.Upload or @ref.Clear (would use a Ref to the SfUploader object) Yes we can manually upload the file using ‘AutoUpload’ set as false , by default it is true . So it uploads the file once get selected . But when setting it as false prompt the user to upload the file manually . We have also prepared sample for your reference. [Snapshot] Sample Link : https://www.syncfusion.com/downloads/support/forum/169867/ze/BlazorApp1-1564577931 @code{ public void clickAction() { } public void OnFileRemove(RemovingEventArgs args) { } public void OnChange(UploadChangeEventArgs args) { } public void UploadEventHandler(UploadingEventArgs args) { //This method will get triggered before the file get started to uploaded in the server.You can use it, if you wants to perform any action before uploading the file to server } } Thanks, Deepak R.