Upload ANY File to Google Drive in MIT App Inventor (Part 2)

Hello friends and welcome to Obsidian Soft,

In my last tutorial, I made a full app that took a picture using the camera component of MIT App Inventor and uploaded this pic to a folder in Google Drive as many of my viewers had requested for this tutorial. 

Today, I will show you how to make our code so generic that we are effectively able to upload ANY type of file to Google Drive be it text, audio, video, or image. 

This tutorial assumes that you have completed the picture uploading app i.e. part 1 of this tutorial as we wrote some essential script in it and we also made a public folder in Google Drive. 


So, let’s begin…

Open up your UploadFileToGDrive project in MIT App Inventor and go to the blocks section.

First of all, let’s make a procedure for uploading files that takes in two inputs. Use the first procedure type from Procedures (the one that doesn’t return a result) and click on the cog wheel to add two inputs. Rename inputs to fileExt and filePath.

Now, let’s look at our uploadPicBtn code and try to make it more generic.

Look at this part:

We are doing a special thing here by removing "file://" from the path of the saved camera image so how about we remove the correction of the image path from here and take it to the Camera’s AfterPicture event.

So, update your After Picture event to this:

This way we correct the path by removing file:// before assigning it to imageToUpload so it is correct from the very beginning.

Hence, we can directly give imageToUpload here in our uploadPicBtn Click event.

So, this is more or less generic now and we can move the entire uploadPicBtn code to our custom procedure uploadFile. Next, we modify it to remove all image-related parts.

Our final uploadFile procedure looks like this:

But what about our uploadPicBtn code as it is empty now.

We have to call the procedure uploadFile and give it image-related information as input.

So, we can use this uploadFile procedure to upload any file as long as we know its file path.

So, let’s add some more components to our screen for uploading text and sound files by going to Designer View.

Drag and drop another horizontal arrangement from Layout below the camera buttons one. Make the width: fill parent, height: 13% and align horizontal and align vertical both center.

Drag and drop a textbox from the User Interface palette inside this second horizontal arrangement. In its properties, make it multiline. Drag and drop a button next to this textbox and rename it to saveTextFileBtn and change the text on it in its properties to “Save”.

Drag and drop another button next to the save button and rename it to uploadTextFileBtn and change the text to “Upload File”.

Select the second horizontal arrangement and duplicate it by pressing Ctrl + C and Ctrl + V on the keyboard for Windows OR Command + C and Command + V on the keyboard for MacOS.

Delete the text box from this arrangement. Rename the saveTextFileBtn2 to startRecBtn and change text in its properties to “Start Rec”. I am going to use the second button for two things: stopping the recording and uploading it simultaneously but you can have two buttons for this work!

So, rename it to stopRecUploadBtn and change the text in its properties to “Stop Rec & Upload”.

Now, drag a Sound Recorder component from the Media palette onto the viewer.

We also need a File component so get it from the Storage palette.

We have added all that we need for this project in the designer section so let’s go back to the blocks section.

When saveTextFileBtn is clicked, we want to save whatever is inside the Textbox as a text file.

So, use File’s saveFile procedure to do this. We need to provide a fileName but don’t be confused with our global fileName variable as that is for uploading the file with a unique name to Google Drive. The filename required by SaveFile procedure is for saving the file on your device. So, give some name prefixed by / to make sure that the file is shareable. If you don’t prefix it by /, it will be considered a private file and we will not be able to get the path for it. Also, do provide it a file extension i.e. “.txt”

The File component’s SaveFile procedure on successful completion, triggers the AfterFileSaved event that returns a fileName but we have a problem as this fileName contains just the file name that we provided when we pressed the save text file button and it doesn’t give us the path. Remember that our uploadFile procedure requires an absolute file path for any file that we want to upload to Google Drive.

 

Fortunately, there is a procedure in our downloaded extension for getting the App-specific directory’s path where our text file was saved.

So, add the following code to AfterFileSaved event for setting the textFileToUpload (text file’s absolute path) to a join of app specific directory’s path and the fileName.

The uploadTextFileBtn code is the similar to uploadPicBtn code.

Last is our sound recording and uploading part.

When startRecBtn is clicked, call soundRecorder to start.

When the stop and upload button is clicked we will stop the sound recorder.

The stopping of the sound recorder will trigger the AfterSoundRecorded event. This will give us a sound variable which is actually the correct path of the recorded sound so we can use it safely without any changes in our uploadFile procedure. 

And we are done.

So, we have a custom procedure in this app that can upload a file created in our app to a public folder in our Google Drive. 


I hope you liked this tutorial.


If you like my classes, consider supporting me by buying me a cup of coffee by pressing the button below:

You can also watch the video tutorial for this part on my channel: Obsidian Soft.

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.

Please like my social media pages for more educational resources and tips.
Pinterest:
https://www.pinterest.co.uk/obsidiansoft/_created/
For links to free educational apps, have a look at the educational apps page

Comments

  1. GiulliC1 September 2024 at 05:19

    Hi, can you give me the .aia project of this part? Tank you!

    ReplyDelete

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more