React Native multiple images

0
votes

Could you show me source code about uploading multiple images? I have tried to upload multiple images to my firebase. So i'm using react-native-image-crop picker for select images, and then react native-fetch-blob for convert the images before upload to firebase. After select images, i'm looping the arrays then converting to fetch blob inside looping. But sometimes it works but sometimes the images url is empty. I hope i can find the answer here

1
javascriptfirebasereact-nativefirebase-storage
You should probably update your question to be a bit clearer with how your images are being uploaded and what libraries you are using. - Kyle Roach
I have updated my question sir, is that enough? Actually i just need source code here. - user8784065
@user8784065 check out my answer - Alexander Vitanov
Update the title as well. You made a typo - Kyle Roach

1 Answers

3
votes

Try this:

const uploadImages = (photos) => {
  const uploadImagePromises = _.map(photos, (p, index) => uploadImage({ uri: p, imageName: "image_" + index }))
  const urls = await Promise.all(uploadImagePromises)
  console.log(urls);
}


const uploadImage = ({ uri, imageName }) => {
  const Blob = RNFetchBlob.polyfill.Blob
  const fs = RNFetchBlob.fs
  window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
  window.Blob = Blob
  const mime = 'image/jpg'
  return new Promise((resolve, reject) => {
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
    let uploadBlob = null
    const imageRef = firebase.storage().ref('/images/').child(imageName)
    fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` })
      })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
      .then(() => {
        uploadBlob.close()
        resolve(imageRef.getDownloadURL())
      })
      .catch(error => {
        console.log("error", error);
        reject()
      })
  })
}