How to create a thumbnail image when a new firestore document is created, and when that document contains image url saved in cloud storage?

Question

I would like to achieve the following, but I am currently stuck because the API docs are just too hard. I would like some guidance.

Create a thumbnail image, resizing the image to a width of 100px.

Here are the details to what should be done.

1. The thumbnail image should be created whenever a new document is created in Firestore Database.
2. The document contains a permanent url of the image stored in Firebase Cloud Storage. (This url was generated via getDownloadUrl() method in the flutter cloud storage package.)
3. The generated thumbnail should be stored to the same directory as the original image.
4. The url of the thumbnail image should be updated to the Firestore Database document field.

I am currently using TS but replies in JS would be fine also.

Here is the code that shows my current progress.

const firestore = admin.firestore();

export const generateThumbnailOnCreate = functions
  .firestore.document("missions/{missionId}")
  .onCreate(async (snap, context) => {
    const doc = snap.data();
    const missionImgUrl = doc.mission_img_url;

    /*
     * TODO
     * use the mission img url to access the cloud storage
     * create thumbnail at the storage directory
     * get the permanent thumbnail url update firestore document
     */

    return snap.ref
      .update({ thumbnail_img_url: thumbnailImgUrl })
      .then((docRef) => console.log("Success"))
      .catch((err) => console.error("Error"));
  });

Answer 1

As far as I know, Firebase storage API does not do resizing on images. but what I did was use ImageKit to serve my image as it support dynamic resizing via URL Query.

If you where to stick to Firebase for the thumbnail, you'd have to resize the images yourself to the size of the thumbnail you required and store them alongside the original image.

Here is another question with references to functions on how to resize an image with Javascript.