How to upload multiple image to firebase in react native fetch blob

Question

I have multiple images that are stored in an array (image paths stored in array). then I use a for loop to upload every image, but only the last image is uploaded. I use react native fetch blob, and firebase

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

Answer 1

i hope this will help

  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

OK, first of all, you need to cache the length of the array this.state.imagesUri .

This will make your for loop look like so for(var i = 0, length = this.state.imagesUri.length; i < length;i++){ , I hope you've noticed that you aren't checking anymore if the i < this.state.imagesUri (This is incorrect since imagesUri is an array).

Answer 3

I have this code. To upload multi image with firebase and 'rn-fetch-blob' on react native

export const uploadListImageMeal = (param) => {
  const { imagesUrls, mime = 'application/octet-stream', userID, time } = param

  const urls = imagesUrls.map((uri) => {
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
    // let uploadBlob = null
    const currentTime = Date.now()
    const imageRef = firebase.storage().ref(`images/${userID}/meal/${time}`).child(`${currentTime}.png`)
    return fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` })
      })
      .then((blob) => {
        // uploadBlob = blob
        return imageRef.put(blob._ref, blob, { contentType: mime })
      })
      .then(() => {
        // uploadBlob.close()
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        return (url)
      })
      .catch((error) => {
        return host
      })
  })


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