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.

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” ?

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";

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');    
  }

Answer 4

尝试将其添加到输入中：

"class="filestyle" data-input="false" data-buttonName="btn-primary" data-buttonText="Hello there, pick your files"