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

Question

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:

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

Answer 1

Maybe it's not possible using just c#. but you can do this just using Css and Javascript.

<div class="form-group">
    
    <input type='file' id="aa" onchange="pressed()" asp-for="FileToUpload" class="form-control" />
    <label id="fileLabel" class="control-label">@Localizer["FileToUpload"]</label>
   ...
</div>

Javascript

window.pressed = function(){
    var a = document.getElementById('aa');
    if(a.value == "")
    {
        fileLabel.innerHTML = "Choose file";
    }
    else
    {
        var theSplit = a.value.split('\\');
        fileLabel.innerHTML = theSplit[theSplit.length-1];
    }
};

CSS

input[type=file]{
    width:90px;
    color:transparent;
}

Output

Or you can do this by using pure Css like below:-

<input type='file' id="foo" asp-for="FileToUpload" class="form-control" />

CSS

input[type=file]{
 color:transparent;
}
input[type=file]:after {
    color: #000;
    content:"This Works Man!!";
}

Output:-