Upload multiple files transactionally in Firebase Storage

firebase_storage_multi_file_upload.js

// set it up
firebase.storage().ref().constructor.prototype.putFiles = function(files) { 
  var ref = this;
  return Promise.all(files.map(function(file) {
    return ref.child(file.name).put(file);
  }));
}

// use it!
firebase.storage().ref().putFiles(files).then(function(metadatas) {
  // Get an array of file metadata
}).catch(function(error) {
  // If any task fails, handle this
});

Yeah, we need to track progress each file...

Is there any way to track upload progress with this? For single file uploads we can observe state change events from the upload task. Here we have an array of upload tasks - can we aggregate their progress?

Any solution here? Still figuring out how to upload multiple files and track the progress of each one.

Hi Michael,

Could you be so kind and provide some context on how to implement this?

I am driving my head against a wall getting this to work with React.

Here is a question on stackoverflow if it helps.

https://stackoverflow.com/questions/54739331/add-array-of-images-to-firebase-storage-and-realtime-database-using-react-js/54739564#54739564

Jeph

You can do it like this:

const { target: { files } } = event;
const filesToStore = [];

files.forEach(file => filesToStore.push(file));
this.setState({ files: filesToStore });

Or, instead of destructure the event object, you can use de Array prototype with an object,

Array.from(event.target.files).forEach(file => filesToStore.push(file));

Or, you can still iterate through the files with a for...loop

hello, how can i retrieve the downloadUrl of the uploaded files ?
thank you

With "transactionally" , do you mean that if we upload two file and the second file upload fail for some reason, then if the first file upload was completed correctly, it will be canceled from the storage without any effort from me?