Resize all existing images stored in firebase storage and update the newly resized image url to database via api call

Question

I have requirement to resize new and existing images stored in firebase store. For new image, I enabled firebase's resize image extension. For existing image, how can I resized the image and get the newly resized image url to update back to database via api.

Here is my firebase function to get existing image urls from database. My question is how to resize the image and get the new image url?

const functions = require("firebase-functions"); const axios =require("axios");

async function getAlbums() {

const endpoint = "https://api.mydomain.com/graphql";
const headers = {
  "content-type": "application/json",
};

const graphqlQuery = {
  "query": `query Albums {
    albums {
      id
      album_cover
    }
  }`
};
functions.logger.info("Call API");
const response = await axios({
  url: endpoint,
  method: 'post',
  headers: headers,
  data: graphqlQuery
});

if(response.errors) {
    functions.logger.info("API ERROR : ", response.errors) // errors if any
} else {
    return response.data.data.albums;
}
}

exports.manualGenerateResizedImage = functions.https.onRequest(async () => {
    const albums = await getAlbums();
    functions.logger.info("No. of Album : ", albums.length);
});

score 0 · Accepted Answer · answered May 20 '22 at 13:22

I think the below answer from Renaud Tarnec will definitely help you.

If you look at the code of the "Resize Images" extension, you will see that the Cloud Function that underlies the extension is triggered by a onFinalize event, which means:

When a new object (or a new generation of an existing object) is successfully created in the bucket. This includes copying or rewriting an existing object.

So, without rewriting/regenerating the existing images the Extension will not be triggered.

However, you could easily write your own Cloud Function that does the same thing but is triggered, for example, by a call to a specific URL (HTTPS cloud Function) or by creating a new document in a temporary Firestore Collection (background triggered CF).

This Cloud Function would execute the following steps:

Get all the files of your bucket, see the getFiles() method of the Google Cloud Storage Node.js Client API. This method returns a GetFilesResponse object which is an Array of File instances.
By looping over the array, for each file, check if the file has a corresponding resized image in the bucket (depending on the way you configured the Extension, the resized images may be in a specific folder)
If a file does not have a corresponding resized image, execute the same business logic of the Extension Cloud Function for this File.

There is an official Cloud Function sample which shows how to create a Cloud Storage triggered Firebase Function that will create resized thumbnails from uploaded images and upload them to the database URL, (see the last lines of index.js file)

Note : If you have a lot of files to treat, you should most probably work by batch, since there is a limit of 9 minutes for Cloud Function execution. Also, depending on the number of images to treat, you may need to increase the timeout value and/or the allocated memory of your Cloud Function, see https://firebase.google.com/docs/functions/manage-functions#set_timeout_and_memory_allocation

score 0 · Answer 2 · answered May 21 '22 at 16:58

In case someone need it. This is how I resized existing image.

const functions = require("firebase-functions");
const axios = require("axios");
const { Storage } = require("@google-cloud/storage");

const storage = new Storage();

// Don't forget to replace with your bucket name
const bucket = storage.bucket("projectid.appspot.com");

async function getAlbums() {
  const endpoint = "https://api.mydomain.com/graphql";
  const headers = {
    "content-type": "application/json",
  };

  const graphqlQuery = {
    query: `query Albums {
        albums {
          id
          album_cover
        }
      }`,
  };
  const response = await axios({
     url: endpoint,
     method: "post",
     headers: headers,
     data: graphqlQuery,
   });

  if (response.errors) {
    functions.logger.error("API ERROR : ", response.errors); // errors 
if any
  } else {
    return response.data.data.albums;
  }
}

function getFileName(url) {
  var decodeURI = decodeURIComponent(url);
  var index = decodeURI.lastIndexOf("/") + 1;
  var filenameWithParam = decodeURI.substr(index);
  index = filenameWithParam.lastIndexOf("?");
  var filename = filenameWithParam.substr(0, index);
  return filename;
}

function getFileNameFromFirestore(url) {
  var index = url.lastIndexOf("/") + 1;
  var filename = url.substr(index);
  return filename;
}

const triggerBucketEvent = async () => {
  bucket.getFiles(
    {
      prefix: "images/albums", // you can add a path prefix
      autoPaginate: false,
    },
    async (err, files) => {
      if (err) {
        functions.logger.error(err);
        return;
      }

      const albums = await getAlbums();

       await Promise.all(
        files.map((file) => {
          var fileName = getFileNameFromFirestore(file.name);

          var result = albums.find((obj) => {
             return getFileName(obj.album_cover) === fileName;
          });

      if (result) {
        var file_ext = fileName.substr(
          (Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1
        );
        var newFileName = result.id + "." + file_ext;
        // Copy each file on thumbs directory with the different name
        file.copy("images/albums/" + newFileName);

      } else {
        functions.logger.info(file.name, " not found in album list!");
      }
    })
  );
}
  );
};

exports.manualGenerateResizedImage = functions.https.onRequest(async () => {
  await triggerBucketEvent();
});

Resize all existing images stored in firebase storage and update the newly resized image url to database via api call

2 Answers2