Angular 2 read input file

Question

Я пытаюсь понять, как использовать входной файл с Angular 2. В моем примере ниже я бы хотел, чтобы моя консоль зарегистрировала имя загруженного мной файла. К сожалению, этот код вызывает ошибку Cannot read property 'target' of undefined.

Моего component.html

<input 
    id="imageUpload" 
    type="file" 
    (change)="imageRun(input)"/> 

Мой component.ts

imageRun(input){ 
    var files = input.target.files[0]; 
    console.log(files.name); 
} 

Я уверен, если есть Угловое конкретное решение по этому вопросу, как я опускаю в эта же проблема при выполнении этого в простом javascript. Я просмотрел несколько простых JS-руководств, в которых у меня есть метод addEventListener в JS, вместо того, чтобы назначать эти триггеры в HTML. Но эти методы, насколько я понимаю, на самом деле не применимы к проекту Angular 2.

Для справки, здесь an example делается практически так же, как в обычном JavaScript, и используя addEventListener внутри скрипта src.

Answer 1

Вы можете определить локальную переменную шаблона в элементе файла inpit & использовать его внутри Компонента.

<Input #myInput 
    id="imageUpload" 
    type="file" 
    (change)="imageRun(myInput)"/> 

imageRun(input){ 
    var file = myInput.files[0]; 
    console.log(file.name); 
}