Angular File Input selected file is not showing

Question

Actually I'm trying to learn angular stuff here.

The first thing i want to do is do some simple file upload.

I already have my Web API and i already have a simple file select but the problem is it's not showing the browsed file

Here is the screenshot

enter image description here

In the screenshot. I already browse a file. But the problem is it's now showing the selected file. But when i move the mouse over my choose file input. The filename will popup like a toolkit. But the name is not set in the file input. How can i do that?

And below is the HTML code i'm using

<div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
      </div>
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01"
          aria-describedby="inputGroupFileAddon01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
      </div>
    </div>

Thank you

Answer 1

In general you can read files selected by using change event on the input.

For example, In component template -

<input (change)="onFileChange($event)" type="file" id="inputGroupFile01">

and in the class -

  files: any[];

  onFileChange(event){
    this.files = event.target.files;
    // here you can take more action like reading content, etc
  }

the 'files' is an array of selected files which gives information you may use for your task, like name, size, type, last modified, etc.

for more information please refer following - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

I hope this would be useful.