I am facing an issue with uploading two input files as shown below:
<input required accept=".jpg" #file (change)="coverUpload($event)" id="file" name="file" type="file" >
<input required accept=".pdf" #pdf (change)="fileUpload($event)" id="pdfFile" name="pdfFile" type="file" >
<button md-raised-button color="primary" type="submit" (click)="addNew()" [disabled]="!form.valid">Submit</button>
Here is the TypeScript code snippet related to this:
selectedFiles: FileList;
selectedPdf: FileList;
coverUpload(event) {
this.selectedFiles = event.target.files;
}
fileUpload(event) {
this.selectedPdf = event.target.files;
}
addNew() {
let fle = this.selectedFiles.item(0);
console.log(fle.name);
let flePdf = this.selectedPdf.item(0);
console.log(flePdf.name);
this.bookSrv.addBook(this.books, fle, flePdf);
this.router.navigate(['/mybooks']);
}
And this is my BookService implementation:
addBook(bok: Book, file: File, pdfFile: File) {
if (this.uid != undefined && this.uid != null) {
let key = this.afd.list('books' + '/' + 'list').$ref.ref.push().key;
let userid = this.afAuth.auth.currentUser.uid;
this.firebasestorage.ref(`books` + `/` + key + `/` + this.currentUserId + bok.bookname).put(file).then(
this.firebasestorage.ref(`books` + `/` + key + `/` + this.currentUserId + bok.bookname).put(pdfFile).then(
snapshot => {
bok.icon = snapshot.downloadURL;
bok.pdf = snapshot.downloadURL;
this.afd.object('books/list' + '/' + key + this.currentUserId).set(bok);
}));
}
}
However, after submitting it to Firebase, only the last uploaded file gets stored. Can anyone help me with how to upload both files simultaneously? Thank you.