Я хочу загрузить файл с помощью кнопки просмотра, и когда файл выбран, кнопка просмотра должна исчезнуть, а вместо этого кнопка загрузки должна быть рядом с выбранным именем файла.
Как мне это сделать в Angular 6?
Вот что я сделал до сих пор. Сделали первый скрин.
HTML
<div class = "pr-3 pt-2">
<h4>Choose an excel file to upload</h4>
</div>
<div>
<label for = "upload" class = "file-upload-label">Browse</label>
<input type = "file" placeholder = "Upload file" accept = ".xlsx" (change) = "incomingfile($event)" class = "file-upload-input" id = "upload">
</div>
Функция события входящего файла
incomingfile(event) {
this.file = event.target.files[0];
this.filePresent = true;
}
Базовая логика -----> ДЕМО
HTML:
<div class = "pr-3 pt-2">
<h4>Choose an excel file to upload</h4>
</div>
<label *ngIf = "!filePresent">
<input #fileInput type = "file" (change) = "incomingfile($event)" />
<span>Browse File</span>
</label>
<label *ngIf = "filePresent">
<label >{{fileName}}</label>
<button (click) = "uploadFile()"><span> Upload</span></button>
</label>
TS:
file: File;
filePresent: boolean = false;
fileName: string = ''
incomingfile(event) {
this.file = event.target.files[0];
this.fileName = this.file.name;
this.filePresent = true;
}
uploadFile() {
if (this.file) {
console.info(this.file);
}
}
Возможный дубликат Загрузка файла Angular-5