How to Upload Files to Google Cloud Storage Buckets using NodeJS

Table of Contents

1. Prerequisites
2. What is Google Cloud Storage?
3. Building a simple ReactJS application
4. Building a simple NodeJS REST application
5. Integrating Google Cloud Storage into NodeJS REST application
6. Summary

Prerequisites

To follow this article along it would be helpful if the reader is comfortable working with ReactJS, NodeJS and Express Framework.

What is Google Cloud Storage?

Google Cloud Storage is an enterprise public cloud storage platform that can house large unstructured data sets (objects). An object is a piece of data consisting of a file of any format such as storing photos on Facebook, songs on Spotify, or files in online collaboration services, such as Dropbox.

Objects stored in Google Cloud Storage are grouped into buckets. You can interact with the buckets the same way you do with the file system hierarchy that we are familiar with but they both work differently under the hood.

The Google cloud console and available SDKs from Google are used to access buckets. These SDKs come in supported popular languages such as Python, NodeJS, and PHP.

In this guide, we will be uploading user-generated files from a frontend React app to a google cloud storage bucket through the NodeJS SDK.

Building a simple ReactJS application

Let’s start by creating a sample react app with a npm package. Open your favourite terminal and run the following commands.
Make sure you have node installed or simply follow this tutorial.

Once the react app is created with boilerplate code. Run the following command

In your ./src/App.js file replace the code with the snippet below

Add the styling in the snippet below to the ./src/App.css.

The final output should look something like this

Next we add some event listeners to the input button and its parent element to handle the file upload. The event listeners check if any files are uploaded and creates a formData object that will be passed to the backend NodeJS application to start the upload process.

We need a way to track the progress of the upload. Next we add a progress bar from the react-progressbar-line package to our code. First we install the package.

Import the progress bar after the “drop-zone” div into your App.js as follows.

The output should look something like this

We can now go ahead to initiate connection to the NodeJS API that we will be building and make a post request to the file upload endpoint using axios. Lets install axios and also update the onFileChange function.

We are done with the React app 🚀🚀🚀. Next step is to build the backend application.

Building a simple NodeJS REST application

To create the backend Node/Express application, in a new terminal run the following command.

Next we will install some package dependencies that we will be needing for this project.

1. @google-cloud/storage — SDK provided by google for interacting with the storage bucket
2. cors — A node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.
3. multer — A node.js middleware for handling multipart/form-data, which is primarily used for uploading files.

Go ahead and create the app.js, this is where our server code will reside.

In the file above we set up a simple express application running on the port that will be provided in our environment variables or 5000 if one is not provided in the environment variables. A number of middlewares have also been added to parse JSON, and form data which will subsequently be added to the request object and can be accessed through req.body. Within the express route we create a POST route has been created to handle file upload from the frontend.

Next we add Multer which will be used to handle the files that are uploaded from the frontend. Import multer and then make changes to the ./app.js file as follows.

We have completed the set up for the backend application 😍😍. Next we integrate with the google cloud storage SDK.

Integrating Google Cloud Storage into NodeJS REST application

Interacting with the cloud storage bucket is actually quite simple when you are working with the SDK. But first we need to authorize our NodeJS application so that it can communicate with the bucket. We will authorize by creating a service account for this application. Follow this link to learn how to create a service account and generate the authorization keys.

If you have not created a bucket, go to the google cloud console and create one or simply follow the this tutorial. Make sure to set the Access Control for the bucket to “fine-grained”.

Copy the authorization JSON file to the root directory of your application. Next we instantiate the connection to the google cloud bucket you created. Please ensure you replace the <Authorization JSON file name> with the name of the JSON file you downloaded and also the <bucket name> with the appropriate bucket name.

We then update the “/upload” post route with the following code.

I’ll break this down bit by bit. To begin with we encapsulated our code in a try catch block to provide a suitable response to our frontend application if any errors were to occur while uploading to the bucket. The user gets an error under the following circumstances

1. No file is included in the body of the post request
2. User uploads a file larger than 25MB
3. Error occurs during the writestream to the bucket
4. The uploaded to the bucket cannot be made public

Within the try..catch block we created a storage file object and also a write stream to the bucket we are connected to. If the upload is successful, we attempt to make that storage file object public (this is only possible if fine grained ACL has been set on the bucket) and then send that public URL back to the user on the frontend.

Yippee 🚀🚀🚀. We have just built an application that uploads files to Google Cloud Storage.

Summary

In this article, we created a ReactJS frontend application, and also a NodeJS backend application that was connected to a Google Cloud storage bucket that we created. We were able to upload files to the Google Cloud bucket using the google cloud SDK.

To learn more visit the Google Cloud Storage documentation.

Happy coding!