# Save Canvas Image to your Google drive

**URL:** <https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950>\
**Category:** Tutorials and DIY Guides\
**Tags:** google, community, image, canvas, intermediate, tutorial\
**Created:** [November 11, 2021, 1:24pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950 "2021-11-11T13:24:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [November 11, 2021, 1:24pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/1 "2021-11-11T13:24:43Z")

</div>

For this tutorial you will need to code a short script in `Google Apps Script` which you can access it from within `Google Drive`.

You will need to use `Web API` component to talk to the script you created in `Google Apps Script` and pass the parameters using the `Query Parameter` section the the `Body` section. The Base64 image cannot fit into the `Query Parameter` section and therefore will will need to pass it using the `Body` section of the `Web API`.

The Thunkable project is very simple and is used to demonstrate the idea but you are free to use it in whatever idea that would fit your project.

The project basically consists of a **canvas** , a **clear button** to clear the canvas and a **save button** to save the scribbles in the canvas.  
The blocks are:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/6/8687f51ebd4d85379ec5cbceea4334b28d1e410b.png)

and:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/3/437be77d243b54469fa52483803f2957edccd0ee.png)

The above is all the code needed for the demonstration.

In `Google Drive`, open the `script editor` and add this code

```auto
function doPost(event) {
  var filename = event.parameter.imageFile;
  var imageData = event.postData.getDataAsString();
  var blobNew = Utilities.newBlob(Utilities.base64Decode(imageData),'image/png',filename);
  DriveApp.createFile(blobNew);
};

```

Save it and **Deploy** it with the option to be accessed by **everyone**.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/7/e7bb91b6064ae3744ee581129a3137f9a7fce012.png)

Use the **URL** of the deployed **Google web app** to be the URL of your `Web API` component in the project.

Run the Thunkable project and see that your image is saved as an image file in `Google drive`.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/c/5ceccf6e82407038748016cea46900cec8b5f6ac.png)

The Google drive files:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/e/0ef44900e8f13f1bbe18630cb94d0b59c359ba96.png)

This is only an entry point where the actual image is passed to Google Script and saved to the drive but you can of course enhance it by, say, having different file formats saved, or the script returns the file created so that the Thunkable app saves the URL to Firebase or upload the image to Cloudinary.

Copy of the sample project

> **[Thunkable](https://x.thunkable.com/projectPage/618cfa678cdb0f0011998dbe)**

Hope you will find it interesting.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [November 11, 2021, 1:48pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/2 "2021-11-11T13:48:40Z")

</div>

This is such an excellent use of this tool!

You could also save to your firebase account with some extra JS and then have everything live in 1 home. Your firebase Auth, DB, and File Storage!

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [November 11, 2021, 2:05pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/3 "2021-11-11T14:05:16Z")

</div>

Thank you for the suggestion. Yes, I can do that.  
See this post where I explain how to get the authentication of Firebase without using the `Sign in` components and one you retrieved a token you can then access the data through the API just like the previous posts in this same thread.

Basically, you can use Thunkable as from end and use the `Web API` to communicate with all other services.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [November 11, 2021, 2:55pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/4 "2021-11-11T14:55:34Z")

</div>

Yes! its perfect! You can even tie in with the firestore API via the thunkable aPI. although its a bit more work to setup, you’re query capabilities are supercharged!

---

<div class="post-metadata">

**Author:** ![imogenlawford1234](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@imogenlawford1234](https://community.thunkable.com/u/imogenlawford1234)\
**Post date:** [July 4, 2022, 5:25pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/5 "2022-07-04T17:25:15Z")

</div>

I have created this project and am looking to do extend it. Could you explain in more detail how one could upload the URL of the image once saved to google drive to firebase real-time database? Also, is there a way to upload a canvas image straight from Thunkable to firebase via Cloudinary or do you have to save it to google drive first?

Thanks for your help

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 4, 2022, 7:12pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/6 "2022-07-04T19:12:59Z")

</div>

> [@imogenlawford1234](#):
>
> is there a way to upload a canvas image straight from Thunkable to firebase

That’s a good idea you have. I make the sample project to prove a concept and help others to start with the work they have in mind.

in your case, you do not need to do anything other than save the canvas image directly to a Firebase key.

I have amended the demo project. If you **remix** it now you will see **two** new buttons; `Save to Cloud` and `Get from Cloud`.

Draw something in your canvas and then click `Save to Cloud` then click `Get from Cloud` to see the image you drawn showing again as a picture.

You can even exit the app and run it again and just click `Get from Cloud` and you should see the last saved canvas image.

Hope this could make a good start to your project.

---

<div class="post-metadata">

**Author:** ![imogenlawford1234](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@imogenlawford1234](https://community.thunkable.com/u/imogenlawford1234)\
**Post date:** [July 4, 2022, 8:29pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/7 "2022-07-04T20:29:15Z")

</div>

Thank you so much. I appreciate your help! Will try it out now!

---

<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:** [November 8, 2024, 1:14pm UTC](https://community.thunkable.com/t/save-canvas-image-to-your-google-drive/1609950/8 "2024-11-08T13:14:25Z")

</div>