Trigger Firebase Storage Image Resize with Cloud Functions

Firebase is awesome. As written in the previous JSMonday article , it allows us to write serverless applications, authenticate users and many other things.

Firebase also offers a service called Firebase Storage , which is somewhat similar to AWS S3 . You can create a bucket and then insert any kind of file inside of it. It is commonly used for storing images, but here comes the problem: what if an user is uploading an incredible heavy image? You may want to resize it!

Let’s see how you can do it using Firebase Functions .

First of all, let’s initialize a new Firebase Functions project.

Then, let’s install a couple of npm packages:

As you can see, we’re installing these three packages:

@google-cloud/storage allows you to get images from Firebase Storage .
fs-extra , which wraps the Node.js default fs module and exposes its functions with promises.
sharp , an amazing and high performances image manipulation library for Node.js

We’re now ready to write our image resizer!

Let’s navigate to our functions/index.js file and begin to import our needed dependencies:

Great! Now we can start to write our function handler:

NFFNRz7.png!web

As you can see, we’re telling our Firebase Function that we need at least 2GB of memory and a maximum of 120 seconds of time for our function to be executed. We also declare that we need to trigger this function once an image has been uploaded to our bucket ( storage.object().onFinalize ).

Let’s write the handler function:

mArMriv.png!web

We need to get a bunch of informations from our object argument (which is actually an object describing where our image has been uploaded):

Bucket : the bucket where we uploaded the image to.
File Path : the file path inside our Bucket.
File Name : the uploaded file name.
Bucket Directory : the name of the directory where we uploaded our image to.

Now we can create a temporary directory where we’ll execute our resizing code. We’ll also create a temporary file which we’ll run our manipulations on.

Here comes a problem now: our function gets triggered everytime a new file is created inside our Bucket… but we’re actually creating a new resized image, so how can we avoid an infinite resizing-loop?

IzuUNbN.png!web

We’ll set a name like myImage@s_1920.jpg for our resized image (where s_ stands for “size”), so we’ll be able to check if the newly created image is the product of a resizing or not.

If the image is itself a resized image, we’ll quit our function.

Now we just need to download the newly created image. We’ll download it in the previously created temporary file path:

URRfeaF.png!web

Now we’re ready to start the resizing! Let’s say we need to create three different sizes: 1920px, 720px, 100px. Let’s wrap these values into an array:

uEZzAjv.png!web

Now we need to run the resizer, so we’ll create a promise for each size inside our array:

beaQVbY.png!web

As you can see, the process is pretty easy:

sharp

Now we just need to run these three promises… but we don’t want to run them sequentially, it could take too long! So we’ll use Promise.all in order to run them concurrently:

Z3mEZ3f.png!web