File input conversion button transition to upload button with file name in Angular

Question

I want to upload a file with a browse button and when the file is selected the browse button should go away and instead an upload button should come adjacent to the file name selected.

How should I do that in Angular 6?

Here is what I have done so far. Have made the first screen.

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>

Incoming file event function

 incomingfile(event) {
    this.file = event.target.files[0];
    this.filePresent = true;
  }

Answer 1

Basic Logic -----> 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);
    }
  }