How to retrieve the blob/file from ImagePicker in React Native

Question

Hi the object returned by ImagePicker from 'expo-image-picker' do not contains any file, I am not sure how to convert the data returned to blob/file, do I have to write the data to file? Creating a second file like

 const data = new FormData()
 data.append('file', source)

anyway my code

      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        quality: 0.8
      })
      if (!result.cancelled) {
       console.log('Image ', source)
      }

I got this when I console log

Image Object { "cancelled": false, "height": 750, "type": "image", "uri": "file:///Users/macbookair/Library/Developer/CoreSimulator/Devices/3DE97E67-7232-4945-BE1C-50C09FED6116/data/Containers/Data/Application/0C84C698-8C77-4D64-85AC-BFB0E88CBA0F/Library/Caches/ExponentExperienceData/%2540usfslk%252Fwillapprn/ImagePicker/19ED3307-DE54-4A09-A081-7DD32993E46B.jpg", "width": 1124, }

I could add base64 to the options and get it on response but why would I convert base64 to image if it already exist? my issue is that google firestore do not recognize the data sent

FirebaseStorageError {
  "code_": "storage/invalid-argument",
  "message_": "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.",
  "name_": "FirebaseError",
  "serverResponse_": null,
}

Youssef · Accepted Answer · 2020-05-24 15:55:38Z

4

if anyone looking for the answer later on, here's a great function

Example of how to upload image in expo with react-native and firebase

 const response = await fetch(result.uri);
 const blob = await response.blob();
 this.uploadImage(blob)

answered May 24, 2020 at 15:55

Youssef

6631 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nishi Over a year ago

but this doesn't work on android. it throws some "network fail" error.

twboc Over a year ago

Yes because this answer assumes that fetch in browser works the same way as fetch in react-native environment. You probably get that .blob() is not a function.

Collectives™ on Stack Overflow

How to retrieve the blob/file from ImagePicker in React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related