Save Canvas Image to your Google drive

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

and:

The above is all the code needed for the demonstration.

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

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.

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

The Google drive files:
image

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
https://x.thunkable.com/projectPage/618cfa678cdb0f0011998dbe

Hope you will find it interesting.

3 Likes

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!

3 Likes

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.

2 Likes

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!

3 Likes