11

I am using react-native-firebase to work with our Firebase account for authentication, firestore and storage. Attempting to upload a photo to Storage is failing with an unknown error. Here is the code attempted:

_pickImage = async () => {
  await this.getCameraRollPermission()
  let result = await ImagePicker.launchImageLibraryAsync({
    allowsEditing: true,
    aspect: [4, 3],
  });

  console.log(result);

  if (!result.cancelled) {
    // this.setState({ photoURL: result.uri });
    this._handlePhotoChoice(result)
  }
};

_handlePhotoChoice = async pickerResult => {
  let userId = this.state.userId
  firebase
    .storage()
    .ref('photos/profile_' + userId + '.jpg')
    .putFile(pickerResult.uri)
    .then(uploadedFile => {
      console.log("Firebase profile photo uploaded successfully")
    })
    .catch(error => {
      console.log("Firebase profile upload failed: " + error)
    })
}

Testing in iOS Simulator and using the debugger to detect the errors I'm just getting back this error:

"Error: An unknown error has occurred.
at createErrorFromErrorData (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2371:17)
at blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2323:27
at MessageQueue.__invokeCallback (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2765:18)
at blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2510:18
at MessageQueue.__guardSafe (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2678:11)
at MessageQueue.invokeCallbackAndReturnFlushedQueue (blob:http://localhost:19001/e9d43477-4e42-4f7a-b494-16485def4c28:2509:14)
at http://localhost:19001/debugger-ui/debuggerWorker.js:70:58"

UPDATE:

A file is uploaded to the storage bucket, but the file is not the JPEG photo, but instead is JSON content about the file:

{"contentType":"image\/jpeg","name":"photos\/profile_XPIO2lHjlYbdLPchACZHBsmY9Jr1.jpg"}

So somehow a JSON file is ending up in the bucket instead of the actual photo and then the error is thrown.

It looks like this issue is tracked a couple times, but not resolved:

https://github.com/invertase/react-native-firebase/issues/1177

https://github.com/invertase/react-native-firebase/issues/302

davidethell
  • 11,708
  • 6
  • 43
  • 63
  • https://github.com/invertase/react-native-firebase/issues/621 https://github.com/invertase/react-native-firebase/issues/50 – Gavin Thomas May 30 '18 at 20:48
  • @GavinThomas I looked at that link which suggests the problem could be passing the blob to the putFile function instead of the file path, but the photoURL I'm passing from state is a file url within the simulator: `"file:///Users/username/Library/Developer/CoreSimulator/Devices/14BB3E6A-883D-4E7B-A5AE-7F5D20F82A53/data/Containers/Data/Application/0555717C-3B90-4A19-8EA4-BA303F903D86/Library/Caches/ExponentExperienceData/%2540username%252Fapp-name/ImagePicker/59FD4C19-D7CF-490B-9F9F-B449CD5914A6.jpg"` – davidethell May 31 '18 at 09:27
  • Maybe you could post your code for how you are uploading the photo from the device. Maybe it's not actually giving you the blob? Heres a link to my working photo picker to upload on firebase, the action of actually uploading (the code you shared) is within the actions folder. https://github.com/GavinThomas1192/motoMechanicMeeKanic/blob/master/App/Components/vehiclePhotoPicker.js – Gavin Thomas May 31 '18 at 14:04
  • I looked at your code, but since you're using the firebase library and not react-native-firebase I'm not sure it translates well. My picker code is pretty standard, just ImagePicker from ExpoKit. I have updated my code to show the ImagePicker portion. – davidethell May 31 '18 at 20:46
  • what React Native version you are using? – Shiroo Jun 05 '18 at 21:59
  • wait, what? You are using React Native 0.27? @davidethehell – Shiroo Jun 08 '18 at 21:19
  • Sorry, I'm using React Native 0.55. I wrote 27 because that's the Expo SDK I'm using which is based on React Native .55 – davidethell Jun 12 '18 at 10:09

2 Answers2

2

Finally found my issue. The URI of the image from the ImagePicker had a '%' character in it from the local app cache. This percent was being URI encoded to '%25' which resulted in the file not being found by the putFile code. Adding a decodeURI call around the uri fixed the issue.

let fileUri = decodeURI(pickerResult.uri)
davidethell
  • 11,708
  • 6
  • 43
  • 63
  • Decoding is now done automatically in the later releases of react-native-firebase - so this should no longer be an issue. – Salakar Nov 04 '18 at 22:26
0

In case you are using react-native-document-picker, check out this: https://github.com/rnmods/react-native-document-picker/issues/235

Salim Lyoussi
  • 236
  • 3
  • 9