Upload Images to Google Cloud Storage with React Native and ExpressJS

Also Works with React and any other Front-end Javascript Framework

Jake Hasler
Oct 31, 2016 · 3 min read

With ~12 hours of investigation and eventual success, I feel the need to save some grief for anyone approaching this same challenge.

Google Cloud Storage is Google’s version of Amazon S3 Buckets. I use Google Cloud because the dashboard is really nice to navigate, it‘s directly connected with Google’s API’s , and services are easy to configure and start up.

Image for post
Image for post

Here is the section of Google Cloud’s docs that I followed.

In my particular case, I was uploading the images from a React Native app via the react-native-image-picker, to an endpoint on my express server, and then on to Google Cloud.

The Items needed for a successful upload:

The Steps needed for a successful upload

Getting Your Google Cloud Service Account Keyfile

In your Google Cloud console (console.cloud.google.com), go to the API Manager.

Accepting the Image as User Input

You can do this with standard HTML by defining the enctype=multipart/form-data and setting the image picker as <input type="file"> and you’ll be able to achieve the same result.

In my case, here’s what the handled input looked like:

The key points here being the FormData() object construction, and the Content-Type.

Accepting the POST Request for Image Upload on the Server

Run npm install --save @google-cloud/storage multerinside of your express directory to install the storage segment of the Google Cloud Node library.

Accept the image from the front-end request below:

The Route accepting the POST request

The Image Uploading Middleware: Where you’ll use that service account keyfile that was generated in the first step.

This is nearly verbatim from the GCS node library docs

From the route, an object is returned:

{
imageUrl: https://storage.googleapis.com/bucket-name/file-name.jpg
}

And that URL can be accessed directly in the browser, serving up the image publicly for use within your application.

Thanks for reading! I hope this helped you to continue on your journey to creating something awesome.

This knowledge from this post was discovered during the creation of Date Hatcher, an activity based dating app designed for going on real dates. Coming soon to an app store near you.

Image for post
Image for post
Date Hatcher — The Dating app that gets you on dates

Google Cloud - Community

Google Cloud community articles and blogs

Jake Hasler

Written by

Software Engineer at Podium and Creator of Date Hatcher. Tech, Family, Nature, and Baseball.

Google Cloud - Community

A collection of technical articles and blogs published or curated by Google Cloud Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.

Jake Hasler

Written by

Software Engineer at Podium and Creator of Date Hatcher. Tech, Family, Nature, and Baseball.

Google Cloud - Community

A collection of technical articles and blogs published or curated by Google Cloud Developer Advocates. The views expressed are those of the authors and don't necessarily reflect those of Google.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store