how to make thumbnail and place it in the particular folder in Firebase storage using cloud function?

Question

there is a sample code from firebase about how to create thumbnail in here:

https://github.com/firebase/functions-samples/blob/master/quickstarts/thumbnails/functions/index.js

the code is like this

// [START import]
const functions = require('firebase-functions');
const gcs = require('@google-cloud/storage')();
const spawn = require('child-process-promise').spawn;
const path = require('path');
const os = require('os');
const fs = require('fs');
// [END import]

// [START generateThumbnail]
/**
 * When an image is uploaded in the Storage bucket We generate a thumbnail automatically using
 * ImageMagick.
 */
// [START generateThumbnailTrigger]
exports.generateThumbnail = functions.storage.object().onFinalize((object) => {
// [END generateThumbnailTrigger]
  // [START eventAttributes]
  const fileBucket = object.bucket; // The Storage bucket that contains the file.
  const filePath = object.name; // File path in the bucket.
  const contentType = object.contentType; // File content type.
  const metageneration = object.metageneration; // Number of times metadata has been generated. New objects have a value of 1.
  // [END eventAttributes]

  // [START stopConditions]
  // Exit if this is triggered on a file that is not an image.
  if (!contentType.startsWith('image/')) {
    console.log('This is not an image.');
    return null;
  }

  // Get the file name.
  const fileName = path.basename(filePath);
  // Exit if the image is already a thumbnail.
  if (fileName.startsWith('thumb_')) {
    console.log('Already a Thumbnail.');
    return null;
  }
  // [END stopConditions]

  // [START thumbnailGeneration]
  // Download file from bucket.
  const bucket = gcs.bucket(fileBucket);
  const tempFilePath = path.join(os.tmpdir(), fileName);
  const metadata = {
    contentType: contentType,
  };
  return bucket.file(filePath).download({
    destination: tempFilePath,
  }).then(() => {
    console.log('Image downloaded locally to', tempFilePath);
    // Generate a thumbnail using ImageMagick.
    return spawn('convert', [tempFilePath, '-thumbnail', '200x200>', tempFilePath]);
  }).then(() => {
    console.log('Thumbnail created at', tempFilePath);
    // We add a 'thumb_' prefix to thumbnails file name. That's where we'll upload the thumbnail.
    const thumbFileName = `thumb_${fileName}`;
    const thumbFilePath = path.join(path.dirname(filePath), thumbFileName);
    // Uploading the thumbnail.
    return bucket.upload(tempFilePath, {
      destination: thumbFilePath,
      metadata: metadata,
    });
    // Once the thumbnail has been uploaded delete the local file to free up disk space.
  }).then(() => fs.unlinkSync(tempFilePath));
  // [END thumbnailGeneration]
});
// [END generateThumbnail]

but after trying the code above, it seems the thumbnail created is located in the same folder as the original image (profile image) like the picture below

what should I do if I want the thumbnail is located in the different folder named 'thumbnail'? so if upload the image to 'profileImage' folder, the thumbnail will be placed to 'thumbnail' folder

Answer 1

The code you need to modify is here:

const thumbFileName = `thumb_${fileName}`;
const thumbFilePath = path.join(path.dirname(filePath), thumbFileName);
// Uploading the thumbnail.
return bucket.upload(tempFilePath, {
  destination: thumbFilePath,
  metadata: metadata,
});

It's building a path to the location in Cloud Storage where the file should be uploaded in thumbFilePath . You can see that it's joining the directory of filePath and file name thumbFileName . filePath was defined as the location of the original file at the beginning:

const filePath = object.name; // File path in the bucket.

All this means that wherever the original file was uploaded, the thumbnail will be organized right next to it.

If you want to change the location of the final thumbnail, make thumbFilePath contain that location. It might be as simple as changing it like this:

const thumbFilePath = `thumbnail/${thumbFileName}`

Or whatever you need it to be.