Upload File to Google Cloud Storage securely from FrontEnd

Hi there! Welcome to my blog, this is Alan.

Today, I’m going to share with you about Uploading Files to Google Cloud Storage securely from Frontend. With this approach, you can reduce time and work load for your api server if your current upload process has to get a file through your server to get to the Cloud Storage.

Press enter or click to view image in full size

I had a post about this kind of upload but for AWS S3 and mentioned about pros and cons, so you can read more here. The overall steps will be the same, just different storage service.

Let’s get the work done!

• You need to sign up for google cloud and create a storage. This step is not so hard, I believe you can do it.
• Create a Google Account Service.
• Clone the link below repo which I already wrote the upload function. I will walk you through the code.
  https://github.com/alanng2050/blog-demo-upload-to-gcloud
• After you have the Google Account Service and json file, rename it to serviceAcc.json and put it at the root of the repo
• Change .dev.env to .env and put your bucket name.

Before we talk about the code, we should understand the overall flow of this upload progress. It has 2 simple steps.

• The Frontend calls a backend api to get a Signed URL which is the Cloud Storage upload url, one url for one file.
• The Frontend uploads file to the Signed URL.

That is it!

Use the command to spin up the repo you have cloned:

1yarn dev

I made a very simple UI of uploading.

Press enter or click to view image in full size

Open the src/pages/index.tsx, you will find 2 functions:

• onSubmit: it calls the api to get the signedUrl for uploading.
• uploadToUrl: this one will upload the real file to the signedUrl

Those 2 functions are very simple to understand.

Now let’s open the src/pages/api/get-upload-url.ts, all of the logic generating the signedUrl is in there.

• Load the serviceAcc.json to initialize the google cloud storage sdk
• Then use the getSignedUrl from the storage sdk to create the signedUrl

You can also see the updateCors function in case you need it to allow your domain or custom headers.

This approach is not hard to implement and it brings many benefits to your projects. From now on, you don’t have to worry about scaling your server for the upload feature anymore and remove a lot of work for the api.

Press enter or click to view image in full size

Demo

Good luck with your next project!

Thanks for reading!