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