change language input type=file

user_1770530 0
Viewed 46603

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.

spring-mvc jsp javascript
4 Answers

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

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

try adding this to the input: 

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