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

This is for Android exclusively, right?
(putFile seems to be for Android and in web only arrays can use map but files is an Object)

No, this is for JavaScript (files is an array of File or Blob type objects), see: https://firebase.google.com/docs/storage/web/upload-files#upload_from_a_blob_or_file

Looks like I did name the method incorrectly though ;)

files returned by File is not an array, but an object of type FileList. FileList doesn't have method map. Slight change was required :

// set it up
firebase.storage().ref().constructor.prototype.putFiles = function(files) {
var ref = this;
const filesArray = [...files];
return Promise.all(filesArray .map(function(file) {
return ref.child(file.name).put(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?

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?