Skip to content

Instantly share code, notes, and snippets.

@asciimike
Last active November 29, 2021 18:05
Show Gist options
  • Save asciimike/d4f1327b58ad69334ef06327184df790 to your computer and use it in GitHub Desktop.
Save asciimike/d4f1327b58ad69334ef06327184df790 to your computer and use it in GitHub Desktop.
Upload multiple files transactionally in Firebase Storage
// 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
});
@davidtaubmann
Copy link

davidtaubmann commented Jan 14, 2017

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)

@asciimike
Copy link
Author

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

@mercred
Copy link

mercred commented Jul 12, 2017

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

@AndrewEckart
Copy link

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?

@joannesalfa
Copy link

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

@lucianokrebs
Copy link

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.

@jephjohnson
Copy link

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

@crtormen
Copy link

crtormen commented Feb 20, 2019

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

@harounbest
Copy link

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

@andreav94
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment