Загрузка входного файла bootstrap4 не будет отображать имя загруженного файла на входе ?? как решить с помощью угловых

Question

В компоненте Angular я использовал тег входного файла начальной загрузки 4, но после выбора он не будет отображать выбранное имя файла вместо «выбрать файл».

Итак, как показать выбранное имя файла во входном теге, используя angular или css?

Answer 1

Ваш HTML-файл должен иметь содержимое ниже:

    <input type="file" id="ifile" class="form-control" #fileInput (change)="preUpload($event)" />
    <label class="custome-file-label" *ngIf=!isFileChosen>Choose file</label>
    <label class="custome-file-label" *ngIf=isFileChosen>{{fileName}}</label>

Вы можете написать ниже метод в вашем файле component.ts:

isFileChosen:boolean = false;
fileName: string = '';
preUpload(event){
  let file = event.target.files[0];
  if (event.target.files.length > 0){
  this.isFileChosen = true;
  }        
  this.fileName = file.name;
}

Если вы загрузите какой-либо файл, то число будет больше 0, и вы сможете отобразить свое имя вместо метки выбора файла.

Смотрите рабочий пример здесь