UploaderButtons Should Include CssClass

[Mike-E]

Hello Team Syncfusion,

It appears that the upload button has a hard-coded CSS class:

const string UPLOAD_BUTTONS = "e-file-upload-btn e-css e-btn e-flat e-primary"

It would be nice to be able to configure this in a UploaderButtons component.

Thank you for any consideration.

[Mohanraj Mathaiyan]

Hi Mike-E,

Greetings from Syncfusion support.

We have CssClsss property which is used to set the CSS class in the uploader’s container element.

If you want to customize the button text in the browse button we suggest to use the uploader button property

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderButtons.html

To customize UI appearance for browse button, kindly refer the following documentation for your reference

https://blazor.syncfusion.com/documentation/file-upload/style-appearance#customizing-the-file-upload-browse-button

kindly us know if the above suggestions meet your requirement.

If not, please provide your exact requirement or use case scenario.

Regards,

Mohanraj M

[Mike-E]

Hi Mohanraj, thank you for your reply.  In my case, I have a set of CSS classes from an HTML5up template that I use throughout my application, and they are applied to buttons when needed (e.g. "button fit").  These CSS classes are defined as desired and I do not want to copy/duplicate them to another CSS style/rule.  Having a CssClass for the UploadButtons component would allow me to do this.

Thank you for any consideration.

[Deepak Ramakrishnan]

Hi Mike,

Thanks for your update.

We are currently checking the possibilities for your requirement . We will update the details in two business days(19th , April 2022)

Thanks,

Deepak R.

[Mohanraj Mathaiyan]

Hi Mike-E,

We can’t add CssClass in upload button directly through SfUploader’s CssClass property. Hence, we suggest you use Sfbutton component instead of uploader component and trigger the file select dialog from the button click. So, you can use the CssClass property of the sfbutton which allows to set the CssClass to the button element directly as per your requirement.

Documentation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_CssClass

We have also attached sample code for your reference.

<div class="parent">

    <SfButton CssClass="btn-form" @onclick="Browse">Browse</SfButton>

</div>

 

<SfUploader @ref="UploadObj" AutoUpload="true" SequentialUpload="SetSequentialUpload">

    <UploaderEvents OnRemove="OnFileRemove"></UploaderEvents>

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

</SfUploader>

 

<style>

.e-upload .e-file-select-wrap, .e-bigger.e-small .e-upload .e-file-select-wrap {

        display: none;

    }

    .e-upload{

        border:none;

    }   

</style>

[output screenshot]

Please check the above solution and let us know if this meets your requirement

Regards,

Mohanraj M

Attachment: uploader_2edcff6f.zip

[Mike-E]

Thank you for the reply @Mohanraj.  I do appreciate you taking the time to provide a workaround as well as sample code.  I also am aware that there are workarounds for accomplishing this same goal.

However, my ask here was a feature request to add this property to the SfUploader control so that we do not have to resort to such workarounds.

Thank you for any further consideration,

Michael

[Sureshkumar P]

As per your request, we have logged this as a feature request and this support will be included in any one of our upcoming releases. We will implement the feature based on the customer request count and priority.  

You can track the status of this feature from the below feedback link.

Feedback Link: https://www.syncfusion.com/feedback/34376

[Mike-E]

Thank you so very much for your great collaboration @Sureshkumar.  It is appreciated. 🙏

[Sureshkumar P]

Mike,

Thanks for your update.

Regards,

Sureshkumar P