文件输入转换按钮转换为带有Angular中文件名的上传按钮

Question

我想使用浏览按钮上传文件，选择文件后，浏览按钮应该消失，而选择的文件名旁边应该有一个上传按钮。

我应该如何在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;
  }

Answer 1

基本逻辑-----> DEMO

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.log(this.file);
    }
  }