Image thumbnails

Parse Server 📡 Cloud Code
#1

Guys,

Step by step I’m pushing my project to production, I’m using firebase for phone authentication and decide to store there some images as well. I have created an adapter for firebase storage and successfully generate thumbnails.

Is there any proper way to get thumbnails through the Android and iOS SDK because the ParseFile will point to the original file.
Is direct access the only way?

Thanks!

#2

What do you mean by Image Thumbnail? Do you want some blurry image under 1kb size?

If so, you can create image thumbnails on android using glide library by overriding image size like this:

Glide.with(context).load(imageUrl).override(10,10).into(imageView);

But for this to work glide has to download all Image which is breaking the point of thumbnails.

You said You have created thumbnails already.

But you say Parse directs to original file? How do you create your thumbnails and how do you store them?

I’m also creating thumbnails of Image. I’m using cloud code and some npm modules.
Thumbnail Module
File Type Module

Here how you can do that:

Add this lines to top of your main.js file

const fileType = require("file-type");
const imageThumbnail = require('image-thumbnail');

Use afterSaveFile Trigger like this:

Parse.Cloud.afterSaveFile(async (request) => {

  const file = request.file;
  const fileData = await file.getData();
  
  const fileBuffer = Buffer.from(fileData, 'base64');
  const mimeInfo = await fileType.fromBuffer(fileBuffer);
  
  console.log(mimeInfo);
  
  if(!mimeInfo.mime.startsWith("image")){
    //If file is image then we create imageThumbnail

    //percentage value determines the quality of imageThumbnail
    //Lower value means lover quality and lower file size
    //I personally use 5 because ıt ussually generates thumbnail smaller than 1KB

    let options = { percentage: 5, responseType: 'base64' };
    const thumbnail = await imageThumbnail(fileBuffer, options);
    
    var thumbfile = new Parse.File("thumbMedia.jpg", { base64: thumbnail });
    const t2 = await thumbfile.save();

    //Now t2 is your thumbnail file. Do whatever you want with it.
    
    
  }
  
});
Error when trying to save new file in afterSaveFile
#3

Hey, @uzaysan

You are taking the Parse approach by creating new files on Parse. I generate thumbnails and upload them directly to firebase through the storage adapter, so on Parse side only 1 file is saved, but in the storage there are the thumbnails next to the original uploaded file.

So basically I’m trying to have only one ParseFile let’s say ‘Avatar’ in my ParseObject and have the ability to decide which version of the avatar to load on the client.

As you mention the ideal should be on Android/iOS to load initially very blurry (small) version of the image and then to load one of the big thumbnails.

#4

I really didn’t understand what you trying to achive. Do you want to load just thumbnail or do you wanna load thumbnail first then load actual image?

If answer is yes for second question then for android this should do the trick.

Glide.with(context).load(bigImageUrl).thumbnail(Glide.with(context).load(thumbnailUrl).into(imageView);

You say you created thumbnail for an image but you say you have only one parse file. I dont get it.

1 Like
#5

In Google Cloud I have 3 files - original + 2 thumbnails. On the Parse server I have only the original file as ParseFile. My questions is if is there any way to specify though the Parse SDK the ParseFile url manually.
Can I get the ParseFile url without downloading the original file and build the thumbnail url, so I can use what you propose in your previous answer?

@uzaysan does this clear the picture a little bit? I know that is a strange approach…

#6

Yes you can. In JavaScript Sdk .url() method returns file url.

You can use it like this: yourParseFile.url()

In android it is file.getUrl()

1 Like