Switch from file input conversion button to uploaded file button with Angular rendering the file name

Question

Switch from file input conversion button to uploaded file button with Angular rendering the file name

I am looking to enhance the file upload feature in Angular 6 by replacing the browse button with an upload button once a file is selected. Can anyone provide guidance on how to achieve this?

Currently, I have created the initial screen as shown below:

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;
  }

https://i.sstatic.net/muBCB.png

javascript css angular file-upload angular6

Answer 1

Answer №1

Introduction to Basic Logic -----> Check out the DEMO

Here is the HTML code snippet:

<div class="pr-3 pt-2">
    <h4>Select 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>

And here is the corresponding TypeScript code:

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

Answer 2

Introduction to Basic Logic -----> Check out the DEMO

Here is the HTML code snippet:

<div class="pr-3 pt-2">
    <h4>Select 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>

And here is the corresponding TypeScript code:

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

Switch from file input conversion button to uploaded file button with Angular rendering the file name

Answer №1

Similar questions

Customizing the Navigation Border-Bottom in WordPress

What is the best way to set up <Input> to restrict input to only include letters, spaces, and the backspace key

When I have a lengthy description, the alignment of the CSS DIV prices becomes misaligned

What is the best way to manage multiple write functions triggered by a socket.io room's `emit` event?

Updating form validation by altering input value

The loader function for createBrowserRouter in React Router is causing an infinite loop

Unable to access account with Passport.js after cookie expiration

Controlling File Upload Edits: A Guide to Effective Management

Need help triggering an alert once your AJAX post is successful? Here's how!

How can one change the color of movable tiles to red while keeping the rest of the tiles in their original state in a puzzle game?

unable to properly evaluate the string results from the AJAX request

How can we use jquery ajax to insert data into a JSON array?

Unable to pass data from a Jquery ajax request to another function

Can halting an ajax function mid-process prevent it from finishing?

What is the best way to connect CodeIgniter with Angular.js?

What is the proper way to invoke a method during a slide toggle action within an Angular 2 application, specifically when

Implement the addition of subcollections to a unified identification document in Firestore

How to pass parameters from ajax to php with the help of slim framework

Providing status responses following the usage of Promises for onload and onerror situations

Receiving input from the "Enter" key is functional in Internet Explorer but not Firefox when utilized in Cognos