CODEWITHSUNDEEP
arraysangulartypescriptfilefilelist
SeventhWarhawk
SeventhWarhawk

Reputation: 1323

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?

Upvotes: 1

Views: 1390

Answers (1)

AndyNope
AndyNope

Reputation: 429

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

Upvotes: 1

Related Questions