Archivio mensile:giugno 2022

How to upload files to a web app using App Inventor

When you want to create an app that points to an existing website, a web app can be the right solution, and the App inventor tool made available by MIT makes the creation of this kind of app very easy.
However, the basic mechanism of the App Inventor web app allows only to read the content of the and not to upload or download files. To fix this situation, an extension called CustomWebView has been made available, which allows files to be downloaded and uploaded.

To download CustomWebViewer extension simply click the download button on the Github page. You will obtain back an *.aix file, that is the extension. To install it, simply click “Import extension” at the bottom of the left menu in App Inventor, like showed in image. This is the standard way to import almost all the extensions.

Then simply drag the installed extension in to the interactive screen of App Inventor, like you do with all other objects.

Components

In our main screen (named “Screen1“) we’ll have a Vertical Arrangment container, an Activity Starter and a Sound Recorder.

Blocks

Let’s look to the blocks now. We’ll grant read permissions to read files. Then we create a web app view using CustomWebView, and we put the web app in to a vertical container. We then set file access to true, and let the web app connect to the desired website.

In a second block we specify what to do when we click an upload button on our webapp. We call an activity , specify data type and start the activity.

In the third and last block we tell what to do when the activity is started: call a file upload a set the path of the file as a result. Doing that way we’ll be able to upload our files in to our web app.