Angular internalization translate file upload button text

Question

I am using Angular and i18n to translate the applications in different languages.

How to translate the input file upload button choose file and No file chosen text.

<input type="file" ng2FileSelect [uploader] = "uploader">

ng2-file-upload

Answer 1

Try Something like this:

You can create custom file upload using traditional so you can use Angular internalization translate.

stackblitz

HTML:

<label class="custom-file-upload">
            <input #fileInput  type="file" (change)="select($event)" />
            <span i18n>Upload File</span>
        </label>

CSS:

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: none;
    display: inline-block;
    padding: 0;
    cursor: pointer;
    float: left;
    margin-bottom: 20px;
    a {
        color: #0000ee;
    }

    a:hover {
        color: #0000ee;
        text-decoration: underline;
    }
}

TS:

export class AppComponent {

  @ViewChild('fileInput') fileInput: any;
  select(event) {
    console.log(event);
  }
}