1

How to remove specific file from files selected with input type with multiple attribute?

<input type="file" (change)="onFileChange($event)" #fileInput multiple>

enter image description here

I want to delete one of the selected file. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

https://jsfiddle.net/Sagokharche/eL3eg6k4/

Sagar Kharche
  • 2,577
  • 2
  • 24
  • 34

3 Answers3

1

Do you need it to be impossible to choose? Then use HTML Input file accept property. accept="image/png" for instance.

Or you want it to filter from the input after the user selected it? Then you should use a custom directive or check for the file types in the ts code upon upload.

EDIT in that case, in your code:

onFileChange(event) {
    const fileList = event.target.files;
    console.log("User selected fileList:", fileList)
    Array.from(fileList).filter(
      item => {
        console.log("file mime type:", item['type'])
      })

    const filesToUpload = Array.from(fileList).filter(
      item => { return item['type'] != "application/zip" })

    console.log("reduced list:", filesToUpload)
  }

Working stackblitz example here.

ForestG
  • 17,538
  • 14
  • 52
  • 86
  • I want to filter it after user selected it. – Sagar Kharche Apr 24 '18 at 10:15
  • How we can remove it from actual input type file? Please see the screenshot which shows 2 files and after delete one file from filelist it should show 1. – Sagar Kharche Apr 24 '18 at 10:38
  • @ForestG I have a question please, How to post this file in ws? I have a similar example and my file post null in ws: `urlSearchParams.append('files', this.files)` this is my post: https://stackoverflow.com/questions/49942899/no-files-were-uploaded-using-api Thanks – OnnaB Apr 24 '18 at 10:49
  • I do not understand. The code I provide shows that the filtered data only contains specific file types. You can continue to use that array and your files are "deleted" from it. You can bind that again with the [ngModel](https://angular.io/guide/user-input) bind back if you want, but that totally makes no sense from a UserExperience point of view. – ForestG Apr 24 '18 at 11:15
0

You can access the inputs FileList-object in .ts side like this:

onFileChange(event) {
    console.log(event.srcElement.files);
}

Edit: If you are looking for a solution how to make dynamic form (add and delete inputs), then have a look at this answer and demo: Angular 4 Form FormArray Add a Button to add or delete a form input row

Mulperi
  • 1,450
  • 1
  • 14
  • 24
0

In your hmtl code

<div class="row">
    <div class="col-md-2 productAddfromImages" *ngFor='let url of imageurls; let i = index'>
      <img class="img-fluid" [src]="url.base64String">
      <a (click)="removeImage(i)" class="btn btn-xs btn-danger">Remove</a>
    </div>
    

  </div>

Remove function

  removeImage(i) {
     this.imageurls.splice(i, 1);
  }

Add Function

onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
  var filesAmount = event.target.files.length;
  for (let i = 0; i < filesAmount; i++) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.imageurls.push({ base64String: event.target.result, });
    }
    reader.readAsDataURL(event.target.files[i]);
   }
   }
  }
 }

For more details:https://findandsolve.com/articles/how-to-upload-and-remove-multiple-image-using-anular-code-example

Sundar
  • 142
  • 1
  • 15