Compress images to save space

[ayfolut]

Hi @LA81638

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.