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,
}

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,
}

• javascript
• reactjs
• react-native

1 Answer 1

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)