AppInventor: HOWTO: Upload Image to Google Drive using base64 and Google Apps Script Web App

This question was asked on the forum recently, and due to changes in google authentication has become more difficult to achieve. However, by using a “man in the middle” web app, it is possible to upload images to a private or public google drive folder, using base64 to convert the image to a string, and back again!

Credits must go to TANAIKE whose blog post on achieving this in several different ways, primarily using curl from a command line, lead me to a solution, and also to ghostfox for the base64 conversion extension over on thunkable.
I used the imagePicker to select files for upload, as this provides a full path to the file. It doesn’t have to be done this way. To upload image assets in your app for the base64 extension, one must first copy the image to the internal sdcard.
To wet your whistle, here is a video of a sample app in action:
You are going to need three elements for all this to work (assuming you already have a google account in place!):
  1. A google drive folder to upload your files to, along with the ID for that folder
  2. A google apps script web app to handle the decoding of the base64 string
  3. An AI2 app to select and upload the file from
Lets get started
1. Google Drive Folder
Create a google drive folder for your uploads.
Note the folder ID
Decide on sharing options for your folder
2. Google Apps Script Web App
Somewhere else in your google drive, create a new Google Apps Script and name it accordingly
In the already created code.gs add the following code, overwriting the default code

Replace FOLDER ID HERE with your chosen folder ID
Save the project and the publish as a web app, running the app as you, and available to anyone.
You should be asked to authorise permissions, do so. If you are not asked then select the doGet() function and run this to get permissions sorted
You will also get a popup telling you the url to your published app (the one in the box). Note this down as you will need this for your AI2 app.
The web app requires three parameters: a filename, a file type, and the file itself ( in this case the base64 string )
3. AI2 App
These are the blocks used in the sample app from the video.
The only item you need to edit for it to work is the value for Web1.Url in the Button.click event. This is the url to the web app created earlier.

NOTE: after writing this howto, I discovered that some devices, or devices in some locales will convert jpeg extensions to jpg, and others from jpg extensions to jpeg

If when your image is selected by the listpicker and comes through as jpeg please change your ImagePicker1.AfterPicking blocks to the following: (and additional if statement to account for the jpeg extension

You should now have everything you need to upload files to google drive 🙂

aia attached 🙂 uploadImage2GoogleDrive

31 thoughts on “AppInventor: HOWTO: Upload Image to Google Drive using base64 and Google Apps Script Web App

  1. Hi,

    Thanks a lot for this tuto !
    Would that work to send a canvas background image to the drive ?
    I’m not able to get it working yet. any tip?

    M

    • Either use the image you have set to the canvas background or if you are drawing on the canvas as well, use the Canvas.SaveAs block either directly or after saving it as an image?

  2. i made it like is it here and doesn t work … any suggestion ? didn t appear any error …. just i press Upload and nothing happens

    • Have you:
      Saved the project and the published as a web app, running the app as you, and available to anyone? This needs to be done every time you make changes to the web app.

  3. Really great tutorial. Is there a chance to force google drive at the upload to overwrite an existing file with the same name and NOT have several identical named files? That would be great

  4. hello,

    thanks a lot, thats so helpfull. but there’s something problem in my blocks…
    it’s work fine when i use picture from image picker, but if i get picture from camera there is error like this :
    “Attempt to invoke virtual method ‘boolean android.graphics.Bitmap.compress(android.graphics.Bitmap$CompressFormat, int, java.io.OutputStream)’ on a null object reference”

    any suggestion?

  5. Hi, thanks for the tutorial. It works on my app. Anyway, do you have any idea to get my image back from Gdrive to my apps ? I can’t open the forum that you shared.

  6. Hi tim, Would you mind tell me how to upload an image that comes from canvas in app inventor ? Really stuck here, I have been trying to customize your work, but i didn’t get it. Thanks before.

    • hello, thank you very much for the explanation, it worked perfectly, with the inventor app code and the google apps scripts I could upload images to google drive, a question do you have the tutorial to download an image from the drive? Greetings from Venezuela

    • You will need to identify the file path for the image saved by the canvas (canvas.saveas) – this can, at present be tricky. once you have this, should simply be a case of substitution in the code to upload an image

  7. How i want to combine it with google sheet, so after the image uploaded to GDRIVE, the link of that image will be there in Google Sheet. Thanks before

  8. 181/5000
    Hi I have the same problem it says upload successful but the file does not upload, I’m using the aid example and the same published code. I have the permissions enabled. What can be?

    • All I can suggest is that you retrace your steps, check each part of the process, and try again. I have tested my example and I know it works. If you still can’t get it going, ask a question on the AI2 Forum, providing details of your blocks and google web app script.

  9. Hi! I’m trying to do this exact same thing, but with a .txt file instead of an image, but I’m having a hard time. Is there a way to do this? Do I need to use this method, or is there a separate (probably simpler) method I should use? Thanks a ton!

Leave a Reply

Your email address will not be published. Required fields are marked *