1. Home
  2. Forum
  3. Blazor
  4. How can we rename default title of the Browse button

How can we rename default title of the Browse button

Hey Team,
we're strugling to find any documentation of how we can rename the tile for all buttons of the File Upload control.

Any information or examples would be appreciated.

Thanks and Best Regards,
Lubo

7 Replies
BC Berly Christopher Syncfusion Team April 6, 2020 12:17 PM UTC

Hi Lubo, 

Greetings from Syncfusion support.  

We can change the title of the buttons available in the Uploader by defining the required definition for button in the localization files. Please refer the below documentation to know more about this.  

[index.razor] 
@using Syncfusion.Blazor.Inputs 
<SfUploader ID="UploadFiles"> 
    <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings> 
</SfUploader> 
@code { 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
 
    protected override async Task OnInitializedAsync() 
    { 
        await base.OnInitializedAsync(); 
        this.JsRuntime.Sf().LoadLocaleData("wwwroot/ej2-locale/en-US.json").SetCulture("en-US"); 
    } 
} 
[wwwroot/ej2-locale/en-US.json] 
{ 
  "en-US": { 
    "uploader": { 
      "Browse": "Select a File", 
      "Clear": "Clear", 
      "Upload": "Upload", 
      "dropFilesHint": "Or drop files here", 
      "invalidMaxFileSize": "File size is too large", 
      "invalidMinFileSize": "File size is too small", 
      "invalidFileType": "File type is not allowed", 
      "uploadFailedMessage": "File failed to upload", 
      "uploadSuccessMessage": "File uploaded successfully", 
      "removedSuccessMessage": "File removed successfully", 
      "removedFailedMessage": "Unable to remove file", 
      "inProgress": "Uploading", 
      "readyToUploadMessage": "Ready to upload", 
      "abort": "Abort", 
      "remove": "Remove", 
      "cancel": "Cancel", 
      "delete": "Delete file", 
      "pauseUpload": "File upload paused", 
      "pause": "Pause", 
      "resume": "Resume", 
      "retry": "Retry", 
      "fileUploadCancel": "File upload canceled" 
    } 
  } 
} 
 
Please find the sample and documentation from the below link. 

 
 

Regards, 
Berly B.C

CH Chet May 29, 2020 12:28 PM UTC

I'm not sure of the exact syntax, but looking at the documentation I think there is a more straightforward way of updating the button text?


and


Would be nice to see an example of it done this way, if possible... rather than having to resort to js interop.

BC Berly Christopher Syncfusion Team June 1, 2020 11:35 AM UTC

Hi Lubo, 
  
Yes, we can change the button text of the Uploader component by using buttons property as mentioned below. 
  
@using Syncfusion.Blazor.Inputs 
 
<SfUploader ID="UploadFiles" Buttons="@browseBtn"> 
    <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings> 
</SfUploader> 
@code {    
    private UploaderButtonsProps browseBtn = new UploaderButtonsProps() { Browse = "choose file", Clear = "Cleared", Upload = "Save" }; 
} 

  
Please find the sample from the below link. 
  
Regards, 
Berly B.C 


CH Chet June 2, 2020 08:47 PM UTC

Thank you for the example.  I had attempted something similar but, like your example, it generates compiler warnings...

warning BL0005: Component parameter 'Browse' should not be set outside of its component.
warning BL0005: Component parameter 'Clear' should not be set outside of its component.
warning BL0005: Component parameter 'Upload' should not be set outside of its component.

Having run into issues ignoring this warning in the past, I have been writing my code such that I avoid it.  As near as I can tell it's not a warning to be taken lightly.  This accepted best answer to this Stack Overflow question sums up the information from Microsoft on why it should be avoided.


It it possible to avoid this warning with your component?

A style like this would be nice, but it doesn't seem to have any effect...

     <UploaderButtonsProps Browse="choose file", Clear="Cleared", Upload="Save" }
      .....




BC Berly Christopher Syncfusion Team June 3, 2020 09:04 AM UTC

Hi Chet, 
  
We have confirmed the reported issue “buttons property is not working when provided as child tag in the Uploader” as a bug at our end and this fix will be included in our upcoming patch release scheduled on 17th June 2020. We appreciate your patience until then. 
  
You can track the status of this issue from the below feedback.  
  
Regards, 
Berly B.C 


PM Pranshu Mishra June 18, 2020 02:04 AM UTC

Hi there,

Any update on this as well? I would like to customize it using the <UploaderButtonsProps>
But for the time being I am getting around by the solution provided by Berly


Thanks..

BC Berly Christopher Syncfusion Team June 18, 2020 10:09 AM UTC

Hi Pranshu, 
  
Thanks for the patience. 
  
We are glad to announce that our patch release v18.1.56 has been rolled out. We thank you for your support and appreciate your patience in waiting for this release. The fix for the reported issue “Buttons property is not working when provide as child tag in the Uploader component” is included in the above release, kindly upgrade to the latest version to get rid of the reported issue. 
  
  
Please find the release notes from the below link. 
  
Please find the sample from the below link. 
  
Please get in touch with us if you would require any further assistance.  
  
Regards, 
Berly B.C 


Loader.
Up arrow icon