change language input type=file

Question

I´m using for my app spring-mvc and I have managed go up file to server, with label: <form:input path="file" type="file" id="file"/>, but I have a problem when my app changes of language, because this input type=file doesn´t change of language and I´m doing a lot of proof but I don´t get it.

does somebody know like it doing?

for to change the language of all labels, I do this:
<fmt:message key="device.registerFormFile"/>

Thanks.

Bruns

do you mean that 'Choose file...' button doesn't change language? – Riyal

my app has the option of that it can change of language in some moment, but my "input type=file" only has the language of browser, for example for to select a file it puts: in spanish "No has seleccionado ningún archivo" if I want to change the lenguage (english) continues in spanish – Bruns

Answer 1

It's not possible to translate "Choose file" and "no file chosen" labels, as those are native browser elements and depend on browser's language.

However, you may try some tricks like putting image instead of button or making file input transparent (and add text input below).
Browse through those answers to choose if any is suitable:

How to change the button text of <input type=“file” />?
Change default text in input type=“file”?

Slicker

Answer 2

you can change the inner html of the span element created when the page is rendered.

example:

let textFile = document.getElementsByClassName('filename');
textFile[0].innerHTML = "Archivo PDF";
let btnFile = document.getElementsByClassName('action btn bg-blue');
btnFile[0].innerHTML = "Seleccionar";

Nanosecond

Answer 3

Having the similar requirement, where wanted to make transitable native browser labels "Choose file" and "No file chosen". I achieved by writing below code.

Just need to create an input field applying style as display: none, and some element id, which need to be used in label tag as for="elementId"

In template (.html) file

<span fxLayout="column">
      <span fxLayout="row">
        <label for="file" class="btn btn-primary btn-block btn-outlined">{{"commonKeysText.chooseFile"
          | translate}}</label>
        <input placeholder="{{translatedPlaceholderText}}" readonly>
      </span>
      <input type="file" style=" width: 100%; display: none;" id="file" name="file"
        (change)="onFileSelect($event)" />
    </span>

In component (.ts) file

fileupload: FormGroup;
translatedPlaceholderText = this.translateService.instant('commonKeysText.noFileChosen');
    this.fileupload = this.fb.group({
          file: ['', [Validators.required]],
    });

onFileSelect(event) {
   let file = event.target.files[0];
   if (event.target.files.length > 0) {
      this.fileupload.get('file').setValue(file);
   } else {
     file = null;
     this.fileupload.get('file').setValue(file);
   }
   this.translatedPlaceholderText= this.fileupload.get('file').value.name;
}

onResetFileSelection() {    
    (<HTMLInputElement>document.getElementById('file')).value = '';
    this.translatedPlaceholderText= this.translateService.instant('commonKeysText.noFileChosen');    
  }

Dyann

Answer 4

Yes of course you can change it !

<input type="file" id="fileInput" accept=".pdf, .docx, .txt">

document.addEventListener("DOMContentLoaded", function() {
var fileInput = document.getElementById('fileInput');
if(fileInput) {
    fileInput.setAttribute('lang', 'fr'); // Set the language attribute to French
    fileInput.setAttribute('title', 'Choisir un fichier'); // Set a French title attribute
    // If you also want to change the button text
    fileInput.addEventListener('change', function() {
        var label = this.nextElementSibling;
        if(label) {
            label.innerHTML = this.files[0].name; // Change the button text to the selected file name
        }
    });
}

});

Deluge

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Sweeny