How to change File Upload Style

[Nina Middelmann]

Hi!

I need to style the FileUpload Component like this (above). 

I really dont know how i can change this Style. I've tried with Uploader Template / Template but it doesnt work as i expected. 

I saw various examples and tried to change that to my needs but - im sorry - i dont understand how i do it like i need.

Regards

[Kokila Poovendran]

Hi Nina Middelmann,

We apologize for any inconvenience you may have faced while trying to customize the FileUpload component using the Uploader Template. We are here to assist you and help you achieve the desired style.

To customize the FileUpload component according to your specific requirements, you can use the Template property. By utilizing this property, you can provide a custom template for the uploader, which will allow you to control its appearance and style.

For detailed information on how to use the template property, please refer to the API link below:

API link:https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_Template

We have also prepared a sample that demonstrates the usage of the template property to achieve a customized look for the uploader. You can explore the sample and adapt it to your specific needs.

Attachment: BlazorApp2_d13449d2.zip

[Nina Middelmann]

Awesome, thanks!

Can you also give me a tip how i can change the disabled state of the "Browse"-Button? 

Example:

We have 3 predefined Images which the user have to select.

After the user selected all these files, the browse button should be disabled

[Kokila Poovendran]

Hi Nina Middelmann,


Thank you for reaching out to us with your question.

To change the disabled state of the "Browse" button after the user has selected all three predefined images, you can utilize the Success event in our uploader component. This event allows you to perform actions after a successful file upload.

We have prepared a sample for you to demonstrate how to achieve this functionality.

API Link:

 https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_Success

Attachment: BlazorApp2_df290d5e.zip