arraysangulartypescriptfilefilelist

FileList.item is not a function?


Whenever I try to access the item property of a FileList variable, I am told that it is not a function? Why is this?

Firstly I get all of the files from the input of type file, and then push them to an array of type FileList which holds the selected files successfully:

files: any = [];

onImageSelect(files: any = FileList) {
    for(let i = 0; i < files.length; i++) {
      this.files.push(files.item(i));
    }
    console.log(this.files)
  }

The onImageSelect method above happens on change of the file input:

<input type="file" accept="image/*" multiple #fileUploader id="fileUploader" (change)="onImageSelect($any($event.target).files)">

Now that I have an array of type FileList, holding all of the files selected using the input of type file, I want to upload each file to Firebase - this is done by pushing each file in the abovementioned FileList array to a NEW array which is also of type FileList:

filesUploaded: any = [];

uploadImages(selectedFiles: any = this.files) {
    for (let i = 0; i < selectedFiles.length; i++) {
      this.filesUploaded.push(selectedFiles.item(i));
    }
  }

The above uploadImages method is called on click:

<button mat-raised-button color="secondary" (click)="uploadImages()">Upload</button>

However once called, I get a type error: "ERROR TypeError: selectedFiles.item is not a function", why could this be?


Solution

  • Try to use this instead:

    onImageSelect(files: any): void {
        this.selectedFiles = files.target.files;
        const formData: FormData = new FormData();
        for (let i = 0; i < this.selectedFiles.length; i++) {
          formData.append('file' + (i + 1), this.selectedFiles[i]);
        }
        console.log(formData);
      }