Подписываться на изменения типа файла ввода с FormControl? - PullRequest
Новая
       23

Подписываться на изменения типа файла ввода с FormControl?

0 голосов
/ 15 ноября 2018

Когда я подписываюсь на FormControl.valueChanges(), который срабатывает при выборе файла на input, значение не содержит полный путь к выбранному файлу. Можно ли получить эту информацию по подписке или мы должны извлечь ее непосредственно из элемента с помощью @ViewChild, чтобы получить прямой доступ к элементу? Настройка выглядит следующим образом: 

<input #file name='file' id='file' type='file' [formControl]='loadButton'/>

Это подписано так: 

this.loadButton.valueChanges
    .pipe(untilDestroyed(this))
    .subscribe(path => {
      console.dir(path);
    });
}

Когда файл выбран, запись оператора выглядит так: 

C:\fakepath\test.png

1 Ответ

0 голосов
/ 15 ноября 2018

В моем проекте я сделал это в одном компоненте, например: 

import { Component, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-image-uploader',
  template: '<input type="file" (change)="onUploadFileChanged($event)" />',
})
export class ImageUploaderComponent implements OnInit {
    @Output() uploadStatusChange = new EventEmitter<any>();
    onUploadFileChanged(event) {
        this.targetElement = event.target;
        if (event.target.files && event.target.files[0]) {
            component.uploadStatusChange.emit('ready');
        }
    }

}

Теперь, после того, как выбранный файл, компоненту сообщат родительскому компоненту, что я готов, тогда вы можете установить из ControlCatch patch для него значение true. HTML-код родительского компонента, например, для приведенного выше примера строка $ event равна «ready»: 

<app-image-uploader (uploadStatusChange)="yourFunction($event)"></app-image-uploader>

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

...