Get Download Url after firebase's resize extension completed

Question

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;
    }
});

Luu

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! – Orissa

Have you found a solution to this? – Stubby

Solution to keep polling to see when it is ready. It works well for me: #58977741 – Ridgeling

Have you got any solution? – Teakwood

No, I am no longer working on the project. – Luu

Answer 1

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
    });

Jaundiced

Answer 2

I've encountered a similar problem in some of my projects, and the solution I've found is as follows:

1. Define the file path.

2. Establish the resized file path based on the extension configuration.

3. Upload the image.

4. Add a 6-second delay to allow the extensions to work.

5. Utilize the resized image path to obtain the download URL.

    endCrop(){
   const file:any = this.croppedImage.split(',')[1];
   let filePath = 'shop_img/' + this.auth.User.authid + '/' + 'imgname.png';
   let resizePath = 'shop_img/' + this.auth.User.authid + '/' +'imgname_600x600.png';
   
   this.storage.uploadImage(file, filePath).then(async urlorigem =>{
     await this.delay(6000); //delay of 6s
       this.storage.storage.ref(resizePath).getDownloadURL().subscribe(url =>{
         this.croppedImage = url; //got url from resized image
       })
    })
   

   }

Skiffle

Answer 3

When Firebase's resize extension creates a thumbnail, it should store this in a specific path, which you've mentioned is set to root/thumbs. The function you've written is trying to check if the object is a thumbnail, but the contentType.startsWith('thumbs/') condition looks off. Instead, you should check if the filePath contains the 'thumbs' directory. Something like if (filePath.startsWith('thumbs/')).

Holbert

Answer 4

Your function has one output with a return in each case, exept one.

 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');

// Here a return is missing, so if the function stops here, there isn't a return to complete the function.


} else {
    console.log('Incomplete data');
    return null;
}

Kaceykachina

Answer 5

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.

Steroid