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 
Thanks,
whoocoder