CODEWITHSUNDEEP
javascriptreactjsfirebasereact-nativefirebase-storage
Raul
Raul

Reputation: 3091

How to upload an album to firebase storage?

INTRODUCTION

Hello, until today I was uploading a single picture to the storage having a progress bar, something that works fine.

Now, I need to upload albums of multiple images. I thought this would be something similar but iterating... What I am doing is:

1. Create a blob for each image in the albun
2. Upload them one by one to the storage.

PROBLEM

The problem is that if I upload them one by one multiple uploadTasks will be created, and I need only one progress bar. Is there any way to upload multiples images at once?

Code

const { images, description, location, tags } = postInfo; // images is an array of images' uris

// TODO - Build the blobs (for each image in images)

// TODO - Post UUID = Firt Blob UUID

// Create a storage referece
const storageRef = firebase.getStorage().ref("photos").child(postId);

// TODO - Upload all blobs to storage
// const uploadTask = storageRef.put(blob); <----------- Not only a blob, just all the album

uploadTask.on("state_changed", (taskSnapshot) => { // How to get a unique uploadTask for all blobs??
  // Update progress bar
  const percent =
    (taskSnapshot.bytesTransferred / taskSnapshot.totalBytes) * 100;

  setUploadProgress(percent);
});

Upvotes: 0

Views: 120

Answers (1)

CRUD DS
CRUD DS

Reputation: 466

It seems like you will need to run multiple async functions at the same time. Try this flow

  1. Create multiple async functions (promises) that uploads the photos simultaneously.
  2. Listen to these uploads and and sum up the bytesTransferred and totalBytes every 0.1 second / every time it changes.
  3. Divide said bytesTransferred by the totalBytes and voila, your uploading progress in fraction.

Thank you for the question. It was a fun one.

Upvotes: 2

Related Questions