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

calls to res.send and res.render

javascript search for parent function argument

Using tabs within a Dialog prevents the Dialog from adjusting its height automatically

What is the best way to create a placeholder for a select option with a looping value?

Having issues with incorporating a component into another component in VueJS

Developing dynamic objects for input string fields in AngularJS

Steps to insert a personalized attribute into a TypeScript interface

Leveraging promises with node.js and couched/nano for asynchronous operations

Is it recommended to use separate Controllers for each tab in Angular JS to load the pane?

The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

Tips for updating process.version in a Node.js environment

Conceal a row depending on the value in a specific column

The arrow function in Jest is missing a name property

Difficulty Establishing a Connection with SQL Server Using TypeORM

Struggling to get the jQuery resize event to function properly

`Month filter functionality optimized`

Crafting personalized objects from an array

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

Executing jQuery code after a data update in Angular can be achieved by utilizing

Selected value is not displayed in the textbox when using autocomplete feature