Uploading Multiple Images to Firebase at Once

Question

I want to upload multiple images to my firebase database at once. I will be needing HTML as well. Here is what I have found by research, but I think due to not having correct HTML (maybe) it doesn't work.

 fileButton.addEventListener('change', function(e){ //Get files for (var i = 0; i < e.target.files.length; i++) { var imageFile = e.target.files[i]; uploadImageAsPromise(imageFile); } }); //Handle waiting to upload each file using promise function uploadImageAsPromise (imageFile) { return new Promise(function (resolve, reject) { var storageRef = firebase.storage().ref(fullDirectory+"/"+imageFile.name); //Upload file var task = storageRef.put(imageFile); //Update progress bar task.on('state_changed', function progress(snapshot){ var percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100; uploader.value = percentage; }, function error(err){ }, function complete(){ var downloadURL = task.snapshot.downloadURL; } ); }); }

 <button type="button" id="fileButton">Upload</button> <input id="imageFile" type="file" accept="image/*" multiple>

Answer 1

You can try and add console.log statements into your code and check if functions are being called. That helps a little.

Alright, so what I did here I was following this link . Basically, you listen to changes on your image input and push these files into an array. Then, when you submit the form, you have the array ready to be sent to firebase.

The snippet below is working fine:)

 const fileCatcher = document.getElementById("fileCatcher"); const fileInput = document.getElementById("fileInput"); let fileList = []; fileInput.addEventListener('change', function(e){ console.log('Input has changed'); fileList = []; //Reset the list const files = fileInput.files; for (var i = 0; i < files.length; i++) { fileList.push(files[i]); } }); fileCatcher.addEventListener('submit', function(e){ e.preventDefault(); //Block the form from reloading the page console.log(fileList); const files = fileInput.files.list; for (var i = 0; i < fileList.length; i++) { var imageFile = fileList[i]; //uploadImageAsPromise(imageFile); } });

 <form id = "fileCatcher"> <button type="submit">Upload</button> <input id="fileInput" type="file" accept="image/*" multiple> </form>