Angular 5, как получить имя файла из ввода с типом = файл

Question

Я знаю, что есть схожие вопросы, но ни один из них не описывает метод Angular 5 или, по крайней мере, не так, как я понимаю.

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

HTML:

<input 
  type="file" 
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

Угловой:

export class ImageUpload {
    currentInput;

    onFileSelected(event) {
        console.log(this.currentInput);
    }
}

Независимо от того, есть ли прикрепленный файл или нет, значение в "currentInput" всегда не определено. Как это работает с вводом, когда тип равен "file"?

Спасибо!

Answer 1

Попробуйте это ниже

onFileSelected(event) {
 if(event.target.files.length > 0) 
  {
    console.log(event.target.files[0].name);
  }
}

Answer 2

@ramesh-rajendran ответ хорош. Если вам нужно решение TypeScript:

      onFileSelected(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files.length > 0) {
        console.log(target.files[0].name);
    }
}

Answer 3

Answer 4

Дайте имя полю ввода, это требование: https://angular.io/guide/forms. Кроме того, вы определили функцию за пределами класса. Функция и свойство должны быть внутри класса.

Обновление: привязка данных не поддерживается типами ввода файлов. Это должно быть сделано с использованием чистого JavaScript.

<input 
  type="file" 
  name = "currentInput"
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

export class ImageUpload {
  currentInput:any;
  onFileSelected(event) {
    console.log(event.target.files);
    this.currentInput = event.target.files; 
  }
}

Answer 5

Попробуйте приведенный ниже код. Он использует эмиттер событий, который прослушивает входящие изменения и возвращает объект файла вместе с его метаданными. Попробуйте. Что мне нравится, так это то, что вам не нужна внешняя библиотека.

//In your component, create a function that emits an event on file selected
import {Component, OnInit, EventEmitter} from '@angular/core';

public onFileSelected(event: EventEmitter<File[]>) {
    const file: File = event[0];
    console.log(file);
}

// In your html, attach the function to the input tag like so
<input type="file" id="file" (change)="onFileSelected($event)">