Image downloader by HTML Extension

Hi Community,

Here’s an Image Downloader HTML extension that you can use in your Project with Web Viewer!
Currently, this type of block/function is not available in thunkable.
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whoocoder's image downloader</title>
</head>
<body>

<script 
      src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
      type="text/javascript"></script>
<script>
// Receive message from Thunkable app
ThunkableWebviewerExtension.receiveMessage(function(message) {
    console.log("Received message from Thunkable app:", message);
    // Define the downloadImage function
    function downloadImage(imageUrl) {
        fetch(imageUrl)
        .then(response => response.blob())
        .then(blob => {
             // Create a URL for the image blob
             var url = window.URL.createObjectURL(blob);
             // Create a link element
             var link = document.createElement("a");
             link.href = url;
             link.download = "IMAGE_DOWNLOADED_BY_A_THUNKABLE_APP"; // Name of the downloaded file
             // Append the link to the body and trigger a click event
             document.body.appendChild(link);
             link.click();
             // Clean up
             document.body.removeChild(link);
             window.URL.revokeObjectURL(url);
        })
        .catch(error => {
            console.error('Error fetching image:', error);
            alert("Failed to download image. Please check the URL and try again.");
        });
    }
    // Call downloadImage function with the received message (image URL)
    downloadImage(message);
});
</script>
   
</body>
</html>

BLOCKS:


Jsut Replace the message with your ImageURL to Download!
you can also Change the name of the Downloaded file by changing link.download !

I made it for my app to download images in the User’s Device.
It’s Really easy to Integrate, first open vscode/notepad
Paste the Code, save the File, now on thunkable’s asset library, upload this, in a web viewer component paste the name of the file in place of the URL, add blocks given above, and there you go!

I made a Post on How to do this 1yr ago but no one replied :smiling_face_with_tear:

Thanks,
whoocoder

I have a Question Regarding these HTML Extensions that Recieve and Post Messages, why is this not working in my Android device?
Is their any solution of this problem?

Hello @whoocoder
I don’t know how to fix HTML code but I will let you know when we will find a solution.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.