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

AppInventor: HOWTO: Test If Image Exists on Device (no extension required)

This one has been bugging me for a few days, and despite the wonderfulness of the File extension from Taifun, I have been searching for a way to test for the existence of an image file using just AI2 blocks and components.

Why do you need this? (for whatever reason you don’t want to use an extension
You may have a situation where you download image files to the app when the user visits a particular part of the app.
Once downloaded, it makes more sense to use the image on the device, as opposed to downloading it again.
My solution was to use a little bit of javascript, a webviewer with webviewstring, a clock and some logic.
Works with webviewer not visible as well
I also used the file component to install the html file needed to the sdcard
Default location is file:///mnt.sdcard, but subdirectories work too, if the additional path is added
My example simply check for an image file, and if it exists displays it, along with a message.
If the file doesn’t exist, displays a different “Sorry” image in the app, and a message.
Developers will be able to apply their own logic, so that if the file is not on the device, it
can be downloaded from online resources.
Most of the components used are likely to already be in an app whilst developing, so often simply a matter of reuse
BLOCKS
Please note, in production, for the filepath for the initial webviewstring and for the “else” setting of Image1.Picture
you may not need to include “file:///mnt/sdcard”.
Also you can create a specific directory on the sdcard when you create the html file in Screen Initialise.

HTML


Credits: in html

aia attached :) TestForFile

Enjoy!

Goodbye Awesome Tables :(

It was all going so well… Having found Awesome Tables in 2016, the creation of tables , charts and graphs suddenly became simple and straight-forward, and made me look cool in front of my colleagues :)

Then I started checking the view stats, in November last we hit 926 views! Guess what happens when you (routinely) hit 1000 views, regardless of the number of different tables, and any within the same domain? Awesome Tables slaps a £5000 per annum fee on your usage!

My educational not-for-profit organisation was not going to stump up for that, no way, no how. I needed a solution, and alternative. I knew that Awesome used javascript and Google Visualizations / Charts on its back end (not forgetting the html and css), I therefore decided to apply myself to the somewhat steep learning curve of google charts/visualizations. Continue reading

Google Visualization Table with Modal on Selection

Couldn’t find anything on this, other than a post about angular.js, so had a go at displaying a modal popup after making a row selection on a google visualization table. I had already got to grips with creating modals and used the code provided by W3-Modal.css, so I simply had to put the pieces together. I used the spreadsheet query method for generating data, if done using a google apps script, it is possible (see other posts) to keep the spreadsheet private. I also used the W3.css file for formatting and layout.

The html page created to do all of this is well commented and you can see the results using the demo after the code. Continue reading

Google Visualization – Gauges

This is fun, a simple couple of gauges linked together, one showing revolutions per minute (rpm) the other showing speed, based upon 5th gear in a L322 Range Rover! I guess with more time than I have got it would be possible to code for the entire gearbox 😉

gauges

Continue reading

Google Visualization – Basic Slideshow from Google Sheet

Here is the code for a simple automatic slideshow using google visualizations

Example Slideshow

Google Visualization – HTML Table Layouts

In order to get a decent layout for charts and dashboards I found it helps to use html tables to create the base layout. Below are two, one with controls across the top, and the second with controls down the side. The tables are reasonably responsive to screen/window sizing….

Top Layout

html

Example Top Filter Table

Side Layout

html

Example Side Filter Table

For these to work with your visualizations, simply insert divs with ids to each of the cells where you need them

Google Visualization – Dependent Controls / Filters

When building a chart with controls (using a dashboard), you very often want to filter, then filter again. Lets say we have a people directory, with names, locations, and countries. You create a CategoryFilter for each of these. But it would make sense to filter by country, then be left with only those in that country, before filtering by location. This is how you do it.

Set up your filters:

Set up the table

Now we need to do the binding of the controls and the table:

You can see that we bind the country to the location, then the location to the people, then the people to the table. In this way, the filters become dependent on each other. In the simple demo below, you should see how – when a country is selected only the locations for that country show in the Location drop down.

Here is a full demo of this in operation:

Demo Open in Browser

Google Visualization – CategoryFilter with csvFilter

As mentioned in a previous post, I have been working on generating a replica of the csvFilter option as found in a well known online visualizer for google sheets. In this post I demonstrated how to create a unique list of items that could be used in the control, and now can show the working example.
Continue reading

GAS Folders, Sub Folders and their Files

Google Drive is a wonderful thing, but when it comes to getting at a file with scripts things can get a little quirky. Every file and folder has a unique ID number (28 digits, letters and other marks) which can make it easy to locate it, if you know how. However you can of course have many files, or folders with the same name spread out across your Google Drive, which can create a bit of a problem when trying to find the file or folder. Very often you may have to iterate over “all the folders” in order to find what you want, using names to do this can be problematic.

I find I am routinely needing to grab a list of filenames, file IDs, or file types, and routinely searching the web each time I need to do this, therefore it was about time I tied down the required scripts in one place for reuse. The scripts I have put together will request either a folder name or ID in order to iterate over the files within that folder and return the results to a spreadsheet. The scripts can be used as a base, and edited to suit specific requirements by adding further properties to return, or through the use of if statements to narrow down selected files.

  • You can find the ID of the folder by looking in the url address bar if you have the folder open in Google Drive
  • You can also right click on the folder and then Shareable Link
  • Finding the name should be obvious! – use search in Google Drive to check for folders with the same name. It may be wise to do this occasionally if you use name a lot in your scripts, and to make your folder names unique

In my scripts I have chosen to return the filename, the mime type, the file ID, and to create a download link. I also include a helper script (courtesy of Sandy Good) that presents the mimetype in a more user friendly way. All four folder scripts rely on this. Thanks should also go to Brian P and AD:AM on the google group support forum for their code.

I will add a link to a google sheet which contains all the scripts, just make a copy of it to your own google drive, authorise the scripts and away you go.

Continue reading