CODEWITHSUNDEEP
angular
Olive
Olive

Reputation: 159

How to add selected file name in label with remove option using input type=“file” and ngFor in angular 4?

I'm new to angular, I'm trying to display list of labels with remove button, when selecting file from folder using input type=“file” using below code,

 <input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>

And I want to remove the added file name from that list by clicking remove button in that corresponding row using ngFor option. Can anyone suggest me an idea to achieve this? Thanks in advance.

Upvotes: 0

Views: 767

Answers (2)

Praveen Gupta
Praveen Gupta

Reputation: 246

In ts file

    files = [];

    onFileChange(event) {
        if (event.target.files && event.target.files.length > 0) {
            this.selectedFile = event.target.files[0];
            this.files.push(this.selectedFile);
        }
    }

    removeFile(index) {
           this.files.splice(i, 1);
    }

In html file

    <input #fileInput type="file" (change)="onFileChange($event)"/> 
    <button type="button" (click)="fileInput.click()">trigger</button>

    <div *ngFor="let file of files;let i = index;">
      {{file.name}} <span (click)="removeFile(i)"> Remove</span>
    </div>

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86740

Just pass the corresponding element in your remove function and remove value of that input field, like below - 

<div *ngFor='let item of list; let i = index'>
  <input #fileInput type="file"  />
  <button type="button" (click)="fileInput.click()">trigger</button>
  <button type="button" (click)="reset(fileInput, i)">Reset</button>
</div>


reset(element, index) {
    console.log(element);
    element.value = "";
  }

Working Example

Upvotes: 0

Related Questions