Image Uploading Made Easier with Google Cloud Buckets— React — Express

When handling an upload feature for a web application, persistence with the file data can be considered a rigorous task, since this uploaded file is converted into a temporary primitive format known as a “blob”. However, despite this fallback, the blob may not have the properties needed for database persistence, but that does not mean the data cannot be accessed remotely. This is where we enter into the world of cloud computing.

Today, I will be discussing one of the most prevalent sources of cloud storage out there on the web, Google Cloud Buckets. In this blog, we will cover what cloud computing is as a whole, and how you can configure your own file uploading feature with persistence using Google’s Cloud Buckets. Let’s get started.

What is Cloud Computing?

Cloud computing is a vital resource for data persistence and services in web applications and provides the availability of system resources — primarily data storage — without the dependency of the user. Cloud computing includes all deployment services available, all virtually persisted databases, and essentially anything that is managed virtually online.

Getting started with Google Cloud Buckets

Before we begin with any code, what would be needed first is the configuration of a service account. Assuming that a google cloud account has been made initially, in the cloud developer console, navigate your way to the “Api’s and services” option, and from there, go to credentials. At the bottom of the credentials window, there will be a service accounts section. Luckily, a service account is pre-made when a project is created. Click on the service account, and add a new key.

A prompt will then pop up indicating what file format the key will be built in. For the sake of this demo, choose JSON for the formatting. The key file will then be automatically downloaded onto your local machine. Store this key very securely within the root of your application, since the file contains confidential keys and links for accessibility.

Now that a key is created let’s begin programming our import feature. To start, be sure to download the required dependencies necessary for this demo as listed below:

npm i @google-cloud/storage multer filepond react-filepond

File Uploader — Configuration

Now that the required dependencies are installed, we can get to work on configuring the cloud storage for our app to utilize. What would be required first is to hold our google cloud files in a directory; we can call this config. In the config, place the JSON key we have obtained earlier into the directory and create a file called storage.js.

Inside of our new storage file, we will begin to flesh out the inner contents needed to connect our cloud storage bucket to our application which will require our service account key file as authentication.

Once we create our storage variable we can now get to work on the next phase of our configuration process. We will now begin developing the method for uploading the image data obtained to the bucket instance and creating the respective URL which will access the image contents.

File Uploader — Server

Now that our file is completed, we can move on to implementing this exported method into our server index. But before we get to creating our new upload route, we first have to create a multer for the file data to be converted. Multers are the core necessity for file uploading, since the middleware specializes in handling multi-part form data. Assuming that an express app is already created for us, let’s create a multer for reading our uploaded file data:

File Uploader — Client

Now we will have the ability to receive data when uploading an image to our server. We can now assume that if we were to make a POST request to record the file data, we can with the method we have created in the config directory initially. However, what about getting the uploaded file data in the first place? In the front-end, there will need to be a file uploading library which will prompt the user with the option to upload a file from their local machine onto the web environment.

For the sake of this blog, we will be using filepond for the file uploading library.

We can now connect our POST request created on the server-side using Axios and.. vioala! An image uploader fully functional and ready to use for your next web application!