How to upload an image in Expo — React Native to Firebase Using Cloudinary
Many of you would have tried to upload your images from expo to Firebase. I am sure you weren’t so lucky.
I spent about two days trying to do the same. Checked out all the stack-overflow questions and suggestions and Expo forums. I failed!
So I’ll tell you how I eventually solved it.
Firebase storage requires that you use a base64 string, but for some reasons I don’t know, the base64 returned in Expo doesn’t work with it. I eventually had to ditch Firebase storage options.
What I ended up doing was upload the image to Cloudinary and save the url to firebase. To use Cloudinary, simply create an account, it’s free!
Cloudinary’s Node.js integration library is available on NPM. Unfortunately for you, when you install the package, you’ll probably end up with these issues:
Also the Javascript core (cloudinary-core) library does not include a function for uploading images to Cloudinary, so that won’t work either.
Solution — Uploading with a direct call to the API
The post url for upload is:
https://api.cloudinary.com/v1_1/<cloud name>/<resource_type>/upload
cloud nameis the name of your Cloudinary account.resource_typeis the type of file to upload,imagein our case
We can make authenticated or unauthenticated requests. We will go with unauthenticated to keep things simple.
The only parameters we need are:
file- The file to upload. Can be the actual data (byte array buffer), the Data URI (Base64 encoded), a remote FTP, HTTP or HTTPS URL of an existing file, or an S3 URL (of a whitelisted bucket).upload_preset- The name of an unsigned upload preset that you defined for unsigned uploading to your Cloudinary account.
Expo ImagePicker api provides us with a base64 option, so thats what we’ll use for file parameter.
To get your upload_preset, go to https://cloudinary.com/console/settings/upload, assuming you’ve setup your account. Scroll down to view preset option. Click on ‘Enable unsigned uploading’, then ‘Add upload preset’.
Enabling unsigned uploading creates an ‘upload preset’ with a unique name, which allows uploading of images without the API secret.
So we finally have all that we need to upload.
The following code snippet shows how to pick an image and get the base64 string in Expo:
Note that the url needs your cloudinary cloud_name. Now we simply need to make an api call.
Once the call is successful, it returns a response which contains the url of the uploaded image. I console log it for you to see.
We can then save this url to firebase.
I made an expo snack for you to try it out. Please visit the link below and don’t forget to add your ‘cloud_name’ and ‘upload_preset’ where appropriate.
