# Image downloader by HTML Extension

**URL:** <https://community.thunkable.com/t/image-downloader-by-html-extension/2922737>\
**Category:** Questions about Thunkable X\
**Created:** [April 1, 2024, 1:56am UTC](https://community.thunkable.com/t/image-downloader-by-html-extension/2922737 "2024-04-01T01:56:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\
**Post date:** [April 1, 2024, 1:56am UTC](https://community.thunkable.com/t/image-downloader-by-html-extension/2922737/1 "2024-04-01T01:56:04Z")

</div>

**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:

```auto
<!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:

 ![Screenshot 2024-04-01 at 7.15.20 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/9/8944ecdf594777a6dd414080d4a6ae5505df8810.png)  
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 🥲

> [@How to make Image downloader In Thunkable](https://community.thunkable.com/t/how-to-make-image-downloader-in-thunkable/2350845):
>
> I want my App Users to Download any edited or created Images, which function Can I Use to do the same in DragNDrop Builder?

Thanks,  
**whoocoder**

---

<div class="post-metadata">

**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\
**Post date:** [April 1, 2024, 11:01am UTC](https://community.thunkable.com/t/image-downloader-by-html-extension/2922737/2 "2024-04-01T11:01:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [April 12, 2024, 9:33pm UTC](https://community.thunkable.com/t/image-downloader-by-html-extension/2922737/3 "2024-04-12T21:33:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [July 11, 2024, 9:34pm UTC](https://community.thunkable.com/t/image-downloader-by-html-extension/2922737/4 "2024-07-11T21:34:12Z")

</div>

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