angularlocalizationinternationalizationangular-i18n

Angular internalization translate file upload button text


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


Solution

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