Upload Images to Google Cloud Storage with React Native and ExpressJS

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

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.

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:

  1. A Google Service Account Keyfile
  2. The Google Cloud Node Library
  3. The Multer library for Express

The Steps needed for a successful upload

  1. Accept the image via Image Picker/Form, or any other file selector.
  2. Creating a FormData() Object
  3. Appending the image details to the Object
  4. Performing a POST request to your Express endpoint as multipart/form-data
  5. Using multer as middleware to parse the request and add a file property to the request object
  6. Middleware service to 1) Authenticate with the Google API, 2) define the storage bucket, 3) specify the file name, 4) Upload the image, and 5) send the response
  7. Passing the above service as middleware to your route, uploading the file and returning the final Image URL.

Getting Your Google Cloud Service Account Keyfile

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

  1. Ensure the Google Cloud Storage JSON API is enabled.
  2. Go to Credentials > Create Credentials > Service Account Key
  3. Under service account, select create a new service account
  4. Once that is created, then you can generate the JSON keyfile.
  5. Save that keyfile to your Express project directory.

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.

Date Hatcher — The Dating app that gets you on dates
Show your support

Clapping shows how much you appreciated Jake Hasler’s story.