Uploading Images without React-Native-Fetch-Blob

Expo SDK
1

Hey… I know I’m not the first (or fiftieth) person to ask about this, but I did something maybe uniquely dumb, which was to use a firebase backend for Expo, so that now I really can’t upload any images. I’ve been trying work arounds all day (on hr 11 right now) to no luck. Things I’ve attempted:

  • using XHR to convert the local file into a blob or an Int8Array and then posting that to firebase.storage().ref(). This returns the error: ‘TypeError: One of the sources for assign has an enumerable key on the prototype chain. Are you trying to assign a prototype property? We don’t allow it [etc]’.
    → I’ve discovered that this seems to be an error with Object.assign() and react-native, which I am not calling anywhere, but which is perhaps being called under the hood by firebase. So there goes that approach.

  • using a separate backend for images, such as a rails server. The problem here is that, when sending a local file to a local server running even on the same computer, the local server can’t find the file. (‘No such file or directory @ rb_sysopen file:///Users/Ian/Library/Developer/CoreSimulator/Devices/’).
    → This is perhaps something to keep looking into… I thought about posting a blob or byte array to rails, using the XHR trick, but it doesn’t work either, given that I get the same TypeError when using fetch with blobs. Is this an error with all blobs? I don’t think so, so maybe I’m missing something–perhaps the blob returned by the XHR trick (It’s xhr.responseType = ‘blob’, and you send the xhr to grab your local file), isn’t the same as an actual blob?.

  • using cloudinary for direct image hosting. You can post fetch requests to cloudinary, and I even got this working briefly, but the issue was that I couldn’t do it with my signed account, just my unsigned one. And if you post with an unsigned key, cloudinary doesn’t return the URL, so that ended up being fairly useless.

  • this fix with scaphold.io (https://gist.github.com/allpwrfulroot/7539e58ad6a8258d78e8f4808f513cad). Now, granted, I’m brand new to scaphold.io (and to mobile dev, which may be one reason I’m having all these problems), but I couldn’t seem to post anything to scaphold successfully… I kept getting my requests denied without quite figuring out why. Maybe that’s one I should watch the tutorial on.

Any advice except to kind of keep trucking through this? Check out Scaphold more, maybe I’ll find a solution there?

Thanks!

2

That problem is partially solved for me. There is a PR in RN core to solve it definitely. In the meantime you can:

  • pick a S3 bucket in AWS to store your images
  • point their urls to firebase database.
3

Great, I’ll give AWS a shot.

4

Check out this library: GitHub - benjreinhart/react-native-aws3: Pure JavaScript React Native library for uploading to AWS S3

Good instructions and works well w/ expo without detaching.

3 Likes
5

thank you, that looks like a lifesaver

6

@wwwillchen this solved my problem. Thanks

1 Like
7

Man just saved my day, thanks.

8

I’m new to s3, any resource that explains how do we set up the permissions?

9

react-native supports blob now and it’s in sdk26. see: https://github.com/expo/firebase-storage-upload-example for an example

1 Like