React Native Firebase Storage Upload fails with Unknown error

Question

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

github.com/invertase/react-native-firebase/issues/621 github.com/invertase/react-native-firebase/issues/50 — Gavin Thomas
@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
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. github.com/GavinThomas1192/motoMechanicMeeKanic/blob/master/App/… — Gavin Thomas
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

davidethell davidethell · Accepted Answer · 2018-06-19T11:35:25

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)

React Native Firebase Storage Upload fails with Unknown error

2 Answers