Tips for uploading numerous images to Firebase using React Native Fetch Blob

Question

Tips for uploading numerous images to Firebase using React Native Fetch Blob

I have a collection of images stored in an array (image paths are stored in the array). I am trying to upload each image using a for loop, but only the last image gets uploaded. My approach involves using React Native Fetch Blob and Firebase for this task.

for(var i = 0; i < this.state.imagesUri;i++){
 Blob.build(RNFetchBlob.wrap(this.state.imagesUri[i].path),{ type : 'image/jpeg' })
            .then((blob) => firebase.storage()
            .ref("userPhoto").child("image"+i)
            .put(blob, { contentType : 'image/png' }).then(()=>{
   var storage =  firebase.storage().ref("userPhoto/").child("image"+i);
              storage.getDownloadURL().then((url)=>{
                var url = url;
              });
            })
          );
        }

javascript firebase-storage react-native

Answer 1

Answer №1

Hopefully this solution proves to be useful

 onSend(images) {
        let photo = images.map( img=> img.image); 
        photo.forEach((image, i) => {
        const sessionId = new Date().getTime();
        const Blob = RNFetchBlob.polyfill.Blob;
        const fs = RNFetchBlob.fs;
        window.XMLHttpRequest =                     
        RNFetchBlob.polyfill.XMLHttpRequest;
        window.Blob = Blob;
        let uploadBlob = null;
        let mime = 'image/jpg';
        const imageRef = this.image.child(`${sessionId}${i}`);
            fs.readFile(image, 'base64')
                                .then((data) => {
                                    return Blob.build(data, { type: `${mime};BASE64` })
                                })
                                .then((blob) => {
                                    uploadBlob = blob;
                                    return imageRef.put(blob, { contentType: mime })
                                })
                                .then(() => {
                                    uploadBlob.close();
                                    return imageRef.getDownloadURL()
                                })
                                .then((url) => {
                                console.log(url)                                        
                               })
                                .catch((error) => {
          
                                });

                              })
                            }

Answer 2

Hopefully this solution proves to be useful

 onSend(images) {
        let photo = images.map( img=> img.image); 
        photo.forEach((image, i) => {
        const sessionId = new Date().getTime();
        const Blob = RNFetchBlob.polyfill.Blob;
        const fs = RNFetchBlob.fs;
        window.XMLHttpRequest =                     
        RNFetchBlob.polyfill.XMLHttpRequest;
        window.Blob = Blob;
        let uploadBlob = null;
        let mime = 'image/jpg';
        const imageRef = this.image.child(`${sessionId}${i}`);
            fs.readFile(image, 'base64')
                                .then((data) => {
                                    return Blob.build(data, { type: `${mime};BASE64` })
                                })
                                .then((blob) => {
                                    uploadBlob = blob;
                                    return imageRef.put(blob, { contentType: mime })
                                })
                                .then(() => {
                                    uploadBlob.close();
                                    return imageRef.getDownloadURL()
                                })
                                .then((url) => {
                                console.log(url)                                        
                               })
                                .catch((error) => {
          
                                });

                              })
                            }

Answer 3

Answer №2

Alright, to start off with, the key is to store the length of the array in a cache variable called length.

With this change, your for loop will be structured as follows:

for(var i = 0, length = this.state.imagesUri.length; i < length;i++){

. You may have also noticed that there's no longer a need to check if i < this.state.imagesUri (This comparison was incorrect since imagesUri is an array).

Answer 4

Alright, to start off with, the key is to store the length of the array in a cache variable called length.

With this change, your for loop will be structured as follows:

for(var i = 0, length = this.state.imagesUri.length; i < length;i++){

. You may have also noticed that there's no longer a need to check if i < this.state.imagesUri (This comparison was incorrect since imagesUri is an array).

Answer 5

Answer №3

This piece of code is designed for the purpose of uploading multiple images using Firebase and 'rn-fetch-blob' in a React Native environment.

const uploadMultipleImages = async (params) => {
  const { imageUrls, mime = 'application/octet-stream', userID, timeStamp } = params;

  const urls = imageUrls.map((url) => {
    const uploadUrl = Platform.OS === 'ios' ? url.replace('file://', '') : url;
    const currentTime = Date.now();
    const imageReference = firebase.storage().ref(`images/${userID}/meal/${timeStamp}`).child(`${currentTime}.png`);
    
    return fs.readFile(uploadUrl, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` });
      })
      .then((blob) => {
        return imageReference.put(blob._ref, blob, { contentType: mime });
      })
      .then(() => {
        return imageReference.getDownloadURL();
      })
      .then((downloadedUrl) => {
        return downloadedUrl;
      })
      .catch((error) => {
        return error.message;
      })
  });

  return Promise.all(urls)
    .then((results) => {
      return results;
    })
}

Answer 6

This piece of code is designed for the purpose of uploading multiple images using Firebase and 'rn-fetch-blob' in a React Native environment.

const uploadMultipleImages = async (params) => {
  const { imageUrls, mime = 'application/octet-stream', userID, timeStamp } = params;

  const urls = imageUrls.map((url) => {
    const uploadUrl = Platform.OS === 'ios' ? url.replace('file://', '') : url;
    const currentTime = Date.now();
    const imageReference = firebase.storage().ref(`images/${userID}/meal/${timeStamp}`).child(`${currentTime}.png`);
    
    return fs.readFile(uploadUrl, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` });
      })
      .then((blob) => {
        return imageReference.put(blob._ref, blob, { contentType: mime });
      })
      .then(() => {
        return imageReference.getDownloadURL();
      })
      .then((downloadedUrl) => {
        return downloadedUrl;
      })
      .catch((error) => {
        return error.message;
      })
  });

  return Promise.all(urls)
    .then((results) => {
      return results;
    })
}

Tips for uploading numerous images to Firebase using React Native Fetch Blob

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript Array failing to transfer to PHP using AJAX

Arrange the JSON object according to the date value

Are you in need of a BISON middleware solution for socket.io encoding and decoding?

Connecting with a php anchor and hash symbol in a website URL

Implementing the fetch API with radio buttons in a React Native application

Initiating the Gmail React component for composing messages

How to update deeply nested subdocuments in Mongoose

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Refresh directive for concealing elements post authentication

How can I expand and collapse elements using Angular?

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

JavaScript: Implementing a retry mechanism for asynchronous readFile() operation

Repair the masthead background during overscroll

React - the method runs correctly when triggered by state changes, but runs twice when the parent component's state changes

What is the best way to send and configure GET information when the characters in a URI surpass 5,000?

What is the solution for the error "BREAKING CHANGE: webpack < 5 used to automatically include polyfills for node.js core modules"?

I am confused about the process of mounting components

Adjust the divs right element by adding or removing 1 pixel for every size change in the browser

Guide to effectively retrieving data from S3 and displaying a view at regular intervals of 4 seconds

Setting default values for route parameters in JavaScript