Make SfUploader.FileDropAreaContent a [Parameter]

[Mike-E]

Hi Syncfusion Team,

Really nice work with the SfUploader control.  Everything is there for me with the exception of the messaging that is displayed to the user.  In my case I have several controls throughout my application and would like to have a different message for each control to display to the user.

Looking at the code it would seem to be possible by making the SfUploader.FileDropAreaContent property public and annotating it with the [Parameter] attribute.

Thank you for your consideration.

[Ponmani Murugaiyan]

Hi Mike,

Before proceeding further, we request you to share the additional details about your reporting issue to have clear understanding. If possible share image screenshot/code snippet to investiaget further in our end.

Regards,

Ponmani M

[Mike-E]

Hi Ponmani thank you for your reply.  For further clarification, I am talking about being about to change the text here:  

Please do let me know if I have misunderstood or overlo

[Ponmani Murugaiyan]

Hi Mike,

You can achieve this requirement “to change the drop files here text” using the Uploader localization. The Localization library allows you to localize static text content of the Uploader. For more information, please refer the below documentation.

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

Regards,

Ponmani M

[Mike-E]

Thank you for the suggestion Ponmani.  I did consider that, but localization is a global setting.  I have 3 or 4 different pages and want to have a different message on each page.  That is not possible with localization if I understand correctly.

[Ponmani Murugaiyan]

Hi Mike,

We suggest you to achieve this requirement by changing the inner text in the created event of the Uploader using the JS Interop with custom CssClass name as like below code snippet.

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

@using Syncfusion.Blazor.Inputs

@using System.IO

@inject IJSRuntime JS;

 

<SfUploader ID="Upload" AutoUpload="false" CssClass="Custom">

    <UploaderEvents ValueChange="OnChange" Created="OnCreate"></UploaderEvents>

</SfUploader>

 

@code {

    public void OnCreate()

    {

        JS.InvokeVoidAsync("Created", "Upload");

    }

    private void OnChange(UploadChangeEventArgs args)

    {

        foreach (var file in args.Files)

        {

            var path = @"path" + file.FileInfo.Name;

            FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);

            file.Stream.WriteTo(filestream);

            filestream.Close();

            file.Stream.Close();

        }

    }

}

window.Created = (id) => {

    document.querySelector(".Custom").getElementsByClassName("e-file-drop")[0].innerText = "Uploader1- drop here"

};

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

Regards,

Ponmani M

[Mike-E]

Hi Ponmari,

You find this to be an easier and more intuitive solution for your users than putting a `[Parameter]` attribute on the `SfUploader.FileDropAreaContent` property?

Thank you for any continued consideration,

Michael

[Ponmani Murugaiyan]

Hi Mike,

We don’t have specific property to change the content of the “Or drop files here” in Uploader component. So that suggested you to use either localization or using JS Interop to meet your requirement.

Regards,

Ponmani M

[Mike-E]

Apologies for the confusion Ponmani, my intent here was to create a new feature request for this issue.  I understand that there are workarounds to accomplish the goal, but they do incur performance penalties, plus they are very inconsistent with how content is defined in other Syncfusion controls.

Thank you for any further consideration.

[Mike-E]

In the meantime Ponmani, it appears that your provided selector id is not used as seen below:

window.Created = (id) => {

    document.querySelector(".Custom").getElementsByClassName("e-file-drop")[0].innerText = "Uploader1- drop here"

};

Notice that "id" is not used.  Note that I have several drop downs on the page and would like to customize each one.

Thank you for any continued assistance you can provide.

[Deepak Ramakrishnan]

Hi Mike,

We are currently validating your requirement . We will update the possibilities in two business days (12th April 2022).

Regards,

Deepak R.

[Mike-E]

Thank you very much Deepak & team!

[Vinitha Jeyakumar]

Hi Mike,

We have considered your request "Provide a new API to change drop area text in file uploader" as a feature from our end and it will included with any of our upcoming releases.

You can now track the current status of the feedback through the below link":
https://www.syncfusion.com/feedback/34104/provide-a-new-api-to-change-drop-area-text-in-file-uploader

Regards,

Vinitha

[Mike-E]

Thank you so much Vinitha & team!  Everyone there is really great.  I very much appreciate your product and dedication to quality.   👍

[Prince Oliver]

Most welcome, we are glad to help you.

[Ahmed Nasr Eldamity]

Is made as property?

If not how to make this as localized?

[YuvanShankar Arunagiri]

Hi Ahmed,

Query: Is made as property?

No, still we don’t provide the property to change the content of the “Or drop files here” in Uploader component.

Query: If not how to make this as localized?

Using the RESX resource file, we can change the text value of “Or drop files here” in Uploader component. refer to the screenshot below and attached sample file.

Output screenshot:

Kindly get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: Localizationwithstaticculture_feba818d.zip

[Ahmed Nasr Eldamity]

Hi YuvanShankar,

I add this localizer in screenshot
but it not changed the value in UI

Output screenshot:

[YuvanShankar Arunagiri]

Hi Ahmed,

We have reviewed your reported query in the Uploader component with localization. Once we have customized the localized text, then we need to mention the using localization language code in the below file.

Output screenshot:

Kindly check with our attached sample and get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: Localizationwithstaticculture_4ff1f095.zip