Firebase Cloud Function to resize image on firestore create

Question

I am trying to achieve following. But, I have no idea as I am a beginner to firebase.

1. User is trying to upload a post with image
2. Image is selected from web browser
3. When user clicks save button, I am uploading the selected image to firbase storage and getting the download URL.
4. Inserting the post data with download url to firestore database.

Till this, I have completed. Now, I need to resize the uploaded image.

For that, I am trying to use Cloud Functions, whenever a new entry is added to firestore database, I am calling a Cloud fountion, which can access the download URL of the image, using this download URL, I need to resize image. Please help.

Please let me know, if there are having any better approach to achieve this. (I know there should be :P )

Edit 1

Thank you Frank for your reply.

I have the below cloud function, which will be called for every post is inserted. I am getting the download URL of the image from the eventSnapshot. I need to resize the image in that location. Please help.

exports.resizeImage = functions.firestore
.document('posts/{postId}')
.onCreate(event => {
        var eventSnapshot = event.data.data();
        //In this eventSnapshot I am getting the document, and I can get the download URL from the document
});

I have analyzed the example to create thumbnail, but for that, I need the
storage object, and it will be called only when the storage object is changed. But, I need to do the thumbnail creation when the onWrite called in firestore.

 exports.generateThumbnail = functions.storage.object().onChange((event) => {
  // File and directory paths.
  const filePath = event.data.name;
});

Please let me know, how to do the image resize operation, by detecting the onWrite in firestore and using downLoadURL.

Answer 1

I, too, have created a document in firestore that I'm using as the backend to a website. I, too, would like to resize the image (to fit on a card) and write the URL back to firestore. I found a solution that uses a different pattern from the standard examples that are triggered by uploading the image to storage.

Basically, I upload the image to storage and then write the URL into Firestore within my app page. I then trigger the function with Firestore's onCreate() trigger.

The function grabs 'image_name' from firestore and uses that to get the file reference in storage. Next, it follows the patterns of the generate-thumbnail firebase example.

The trick was then grabbing the signedUrl and writing it back to firestore in img_src.

In case anyone else finds this useful:

const functions = require('firebase-functions');
const gcs = require('@google-cloud/storage')({keyFilename: 'service-key.json'});
const spawn = require('child-process-promise').spawn;
const path = require('path');
const os = require('os');
const fs = require('fs');

exports.createCard = functions.firestore
  .document('work_cards/{cardID}')
  .onCreate((snap, context) => {
    const newCardData = snap.data()
    const bucket = gcs.bucket('your-project-id.appspot.com')
    const file = bucket.file(newCardData.image_name)
    const tempFilePath = path.join(os.tmpdir(), file.name);
    const thumbFileName = `thumb_${file.name}`;
    const thumbFilePath = bucket.file(thumbFileName)
    const contentType = file.contentType;
    const metadata = {
      contentType: contentType
    };

    return bucket.file(file.name).download({
        destination: tempFilePath,
      })
      .then(() => {
        return spawn('convert', [tempFilePath, '-thumbnail', '250x250', tempFilePath]);
      })
      .then(() => {
        return bucket.upload(tempFilePath, {
          destination: thumbFilePath,
          metadata: metadata,
        })
      })
      .then(() => {
        return thumbFilePath.getSignedUrl({
        action: 'read',
        expires: '03-09-2491'
        })
      })
      .then(signedUrls => {
        const img_src = signedUrls[0]
        return snap.ref.set({img_src}, {merge: true});
      })
      .then(() => {
        bucket.file(file.name).delete()
        fs.unlinkSync(tempFilePath)
        return
      })
    });

Answer 2

Rather than take the URL from Cloud Firestore, you can have Cloud Storage trigger the Cloud Function to resize the image. There is a great example of how to do this, on GitHub.

Firebase SDK for Cloud Functions Quickstart - Cloud Storage trigger