question

jalza avatar image
0 Votes"
jalza asked ZhiLv-MSFT answered

Change "Choose file" and "No file chosen" texts in a <input> for IFormFile in Razor view

I have an ASP.NET Core 5 web app with an action to upload a file.

This is de model:

 public class UploadViewModel
 {
     public IFormFile FileToUpload { get; set; }
 }

This is the view part

 <div class="form-group">
     <label class="control-label">@Localizer["FileToUpload"]</label>
     <input asp-for="FileToUpload" class="form-control" />
     <span asp-validation-for="FileToUpload" class="text-danger"></span>
 </div>

In the web browser I can see a "Choose file" button inside a text box with "No file chosen" text:

135547-choose-file.png

This app is localized so I need to change these texts depending on the selected language, is it possible?


dotnet-aspnet-core-razor
choose-file.png (1.6 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

The file input element is controlled by the browser where the language is dependent on the client system settings. If you are using localization as intended then the client's culture setting is used to drive the localization on the server. The server and client culture will match. If the culture is set manually on the server and differs from the client settings then you might be able change the language in the browser by writing a little JavaScript application.

0 Votes 0 ·

1 Answer

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @jalza,

As AgaveJoe said, the input file element's text is controlled by the browser. If you want to language, as a workaround, you can use the file element with a button element or a text element, then use Localizer to set the language and set the button text or the text element's value.

Check the following sample:

 <div class="row">
     <!-- Define your button -->
     <button id="file">@Localizer["Your Text to Choose a File Here!"]</button>
     <!-- Your File element -->
     <input type="file" name="file" />
 </div>
    
 @section Scripts{ 
     <script type="text/javascript">
     $(function(){
       // Wrap your File input in a wrapper <div>
       var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
       var fileInput = $(':file').wrap(wrapper);
    
       // When your file input changes, update the text for your button
       fileInput.change(function(){
           $this = $(this);
           // If the selection is empty, reset it
           if ($this.val().length == 0) {
               var text = "@Localizer["Your Text to Choose a File Here!"]";
               $('#file').text(text);
           } else {
               $('#file').text($this.val());
           }
           
           //get the file.
           var file = $this[0].files[0];
           //transfer the file to the MVC/API controller via FormData.
       })
           
       //get the file.
       var file = $this[0].files[0];
       //transfer the file to the MVC/API controller via FormData.
   })
    
       // When your fake button is clicked, simulate a click of the file button
       $('#file').click(function(){
         fileInput.click();
       }).show();
     });
     </script>
 }

The result as below:

135811-2.gif

Note: For the security reasons, the file path always starts with C:\fakepath. You can refer the following links to upload file via the FormData object and JQuery Ajax.

Upload files in ASP.NET Core

Upload Image File to Web API


If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion


2.gif (2.1 MiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.