28

This is what I am trying to achieve, implement the firebase's resize image extension, upload an image, then when the resize is completed, add that dowloadUrl's thumbs to a Cloud Firestore document. This question helps me, but still can not identify the thumbs and get the download URL, this is what am have been trying so far.

Note: I set my thumbnail to be at root/thumbs

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

exports.thumbsUrl = functions.storage.object().onFinalize(async object => {
    const fileBucket = object.bucket;
    const filePath = object.name;
    const contentType = object.contentType;
    if (fileBucket && filePath && contentType) {
        console.log('Complete data');
         if (!contentType.startsWith('thumbs/')) {
             console.log('This is not a thumbnails');
             return true;
         }
         console.log('This is a thumbnails');


    } else {
        console.log('Incomplete data');
        return null;
    }
});
Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
Haniel Baez
  • 1,646
  • 14
  • 19
  • I had this problem before using the extension, and ended up using a signedURL... The problem with that was the URL would expire after about a week leaving the thumbnails blank and useless... I don't know why they didn't include documentation for this on the extension itself. It is nice to generate the thumbnails at ease but how about when it comes down to storing that thumbnail's download url in the RTDT for example. I'm looking forward to a solid answer on this! – hugger Oct 28 '19 at 16:07
  • Have you found a solution to this? – Jingles Jun 16 '20 at 11:00
  • Solution to keep polling to see when it is ready. It works well for me: https://stackoverflow.com/questions/58977241/how-to-get-the-resized-downloadurl-after-upload-with-firebase-storage-web-sdk – MadMac Jul 09 '20 at 21:22
  • Have you got any solution? – Abu Saeed Jan 14 '22 at 06:48
  • No, I am no longer working on the project. – Haniel Baez Jan 14 '22 at 14:36

2 Answers2

0

Method 1 : Client Side

  • Don't change the access token when creating the thumbnail.
  • Edit the function from gcloud cloud function console
  • Go to the function code by clicking detailed usage stats
  • Then click on code
  • Edit the following lines
  • Redeploy the function again
  // If the original image has a download token, add a
        // new token to the image being resized #323
        if (metadata.metadata.firebaseStorageDownloadTokens) {
            // metadata.metadata.firebaseStorageDownloadTokens = uuidv4_1.uuid();
        }
  • Fetch the uploaded image using getDownloadURLfunction
https://firebasestorage.googleapis.com/v0/b/<project_id>/o/<FolderName>%2F<Filename>.jpg?alt=media&token=xxxxxx-xxx-xxx-xxx-xxxxxxxxxxxxx
  • Because the access token will be similar
https://firebasestorage.googleapis.com/v0/b/<project_id>/o/<FolderName>%2Fthumbnails%2F<Filename>_300x300.jpg?alt=media&token=xxxxxx-xxx-xxx-xxx-xxxxxxxxxxxxx

Method 2: Server Side

Call this function after thumbnail is created

var storage = firebase.storage();
    var pathReference = storage.ref('users/' + userId + '/avatar.jpg');
    pathReference.getDownloadURL().then(function (url) {
        $("#large-avatar").attr('src', url);
    }).catch(function (error) {
        // Handle any errors
    });
Dr.House
  • 784
  • 5
  • 11
-1

you need to use filePath for checking the thumbs if(filePath.startswith('thumbs/'){...}

contentType has the metadata of files like type of image and etc. FilePath will have the full path.

Siddhant Jaiswal
  • 1
  • 2