How can I get the dowload url from images that are resized with firestorage image-resize extension?

Question

• I am able to download the url from the original uploaded file
• I am not able to download the url from the files that are created by the image resize extention.

//making a ref beforehand
const ref = db.collection("impressions").doc().id;

//upload the original file
const bucket = await firebase.storage().ref("impressions/" + ref).put(image);

//this works but I do not need it
const downloadUrl = await firebase.storage().ref("impressions/" + ref).getDownloadURL();

//trying to retrieve the downloadUrl from the files that are most likely still in the process of being created by the image resize extention?
//the ref's are correct

const downloadUrl_image = await firebase.storage().ref("impressions/" + ref + "_1000x1000").getDownloadURL();

const downloadUrl_thumb = await firebase.storage().ref("impressions/" + ref + "_50x50").getDownloadURL();

How can I get the download url from the resized images? Is there an event I can listen to? Or do I need to make my own function?

Thank you for the help,

Matthias

Answer 1

Firebase extensions are really great because they allow you to rapidly deploy a standard business logic but they might be limited in terms of configuration options.

In particular, you will not be able to get, out-of-the-box, the download urls of the resized images.

I can think of two possible approaches:

1. Trigger a Cloud Function on resized image creation

During the Extension configuration, you define the path in which to store resized images.

The help says:

For example, if you specify a path of thumbs and you upload an image to /images/original.jpg, then the resized image is stored at /images/thumbs/original_200x200.jpg.

So, you know upfront the structure of the path and the names of the resized images. You could therefore trigger a Cloud Function when these files are created, see the doc. You could, for example, store the download url of an image in a Firestore document with the same id than the resized image file name (or the original file name)

2. Write your own Image Resizing Cloud Function

There is a sample within the official Cloud Function samples Collection that does exactly the same than the extension. You will find it here on Github. You can also look at the code of the Extension itself.

This way you'll have full control on the Cloud Function logic.