Compress images to save space

[lisaalger]

Does anyone have a solution to this please? Images taken from a phone are over 9mb and space will get taken up pretty quickly

Tried ‘Image Compression’ plugin but couldn’t understand how to save the images to DB

Any help greatly appreciated

PS, have selected limit image size

[ayfolut]

Hi @lisaalger

I also tried the Image Compressor plugin but it’s difficult to get a hang of, so I switched up to using APIs to manage. Currently, I use TinyPNG API.

Here’s how I do it.

1. Go to TinyPNG – Developer API. Fill out the form there to get your API key.
   

   

2. You should get an email, with a button(link) to Visit your Dashboard
   

   

3. On your dashboard, scroll to the API section and grab the API
   

   

4. Head to replit.com. We need to take a brief tour to convert the API key to base64. Create an account on replit.com (if you don’t have one), and then create a PHP CLI Reply
   

   
   
   
   

Once it has been created, you should have this;

Then write this code;

<?php
$apiKey = "YOUR_API_KEY";
$new_value = base64_encode("api:" . $apiKey);
echo $new_value;
?>

Don’t forget to put your API key in place of the YOUR_API_KEY. Then hit the run code button. Then you should have your API key in a base64 format.

NOW, IT’S TIME TO HEAD ON TO BUBBLE
5. Install the API Connector Plugin
6. Add a New API and give it a nice name.

• Set the Authentication type to be None of self-handled
• Add a shared header with key Content-type and value application/json
• Add another shared header with key Authorization and value Basic YOUR_NEW_API_KEY (Yes, there should be a Basic before the API key that you just generated from Replit.

7. Now, create an API Call.
   
   

• Ensure to set Use as as Action, instead of Data (so that it will show up as a workflow action)
• The API Call type should be POST (as we’re sending an image to be compressed)
• The API Endpoint is https://api.tinify.com/shrink

And then in the Body, paste this code;

{
  "source": {
    "url": "https:<image>"        
  }
}

• For the Value, just add this tinypng.com/images/panda-happy.png

Now, when you initialize your API call, there shouldn’t be an issue.

NOW TO THE BUBBLE APP
8. Setup a quick form with a picture uploader and a button to go with it.

9. Setup a workflow for the button
   Event: When Button is clicked
   Action; Navigare to Plugins, and select the Tinifiny link
   
   

Bu default you should have this;

But then set it to the dynamic value of your uploader Value’s URL

And then set up an action to save it to your DB. For me, I have a data type of test thing, with an image field type. So feed the Result of Step 1 (the compression) output URL into your DB

With that, once an image is uploaded to your uploader, TinyPNG takes charge of it and then compresses it. The result is what is now fed into your Bubble DB.

BONUS
While your form loads up and uploads + compresses the image, you can keep your users engaged with some Lottie animations. Follow my pal’s easy walkthrough on how to implement it.
I hope this helps.

Cheers!
Foluso. Let’s chat on Twitter.

[lisaalger]

Thanks @ayfolut , I’ll certainly give this a try. Thank you for your time

[lisaalger]

@ayfolut I’m receiving this message, any ideas please?

[ayfolut]

Please send a screenshot of the code in the body object.

The error is coming from there.

[lisaalger]

Thanks for your time with this

[lisaalger]

@ayfolut was this what you needed?

[Makks]

I see a red warning that you need to initialize the call before it will work, have you done it?

[olivier.coolen]

@lisaalger You can use my free plugin for this: TinyPNG - Compress images Plugin | Bubble

TinyPNG only temporarily saves the output on their severs, therefore, remember to add ‘:saved to s3’ when saving your image to the database.