{"id":5429,"date":"2024-12-28T14:43:21","date_gmt":"2024-12-28T14:43:21","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5429"},"modified":"2024-12-28T14:57:07","modified_gmt":"2024-12-28T14:57:07","slug":"upload-any-file-to-google-drive-in-mit-app-inventor-part-2","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/upload-any-file-to-google-drive-in-mit-app-inventor-part-2\/","title":{"rendered":"Upload ANY File to Google Drive in MIT App Inventor (Part 2)"},"content":{"rendered":"\n

Hello friends and welcome to Obsidian Soft,<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

In my\u00a0last tutorial<\/strong><\/a>, 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.\u00a0<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

This tutorial assumes that you have completed the\u00a0picture uploading app i.e. part 1 of this tutorial<\/strong><\/a>\u00a0as we wrote some essential script in it and we also made a public folder in Google Drive.\u00a0<\/p>\n\n\n\n

So, let\u2019s begin\u2026<\/p>\n\n\n\n

Open up your UploadFileToGDrive<\/strong> project in MIT App Inventor and go to the blocks section.<\/p>\n\n\n\n

First of all, let\u2019s make a procedure for uploading files that takes in two inputs. Use the first procedure type from Procedures (the one that doesn\u2019t return a result) and click on the cog wheel to add two inputs. Rename inputs to fileExt<\/strong> and filePath.<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, let\u2019s look at our uploadPicBtn code and try to make it more generic.<\/p>\n\n\n\n

Look at this part:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

We are doing a special thing here by removing \u201cfile:\/\/\u201d 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\u2019s AfterPicture event.<\/p>\n\n\n\n

So, update your After Picture event to this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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

Hence, we can directly give imageToUpload here in our uploadPicBtn Click event.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Our final uploadFile procedure looks like this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

But what about our uploadPicBtn code as it is empty now.<\/p>\n\n\n\n

We have to call the procedure uploadFile and give it image-related information as input.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

So, we can use this uploadFile procedure to upload any file as long as we know its file path.<\/p>\n\n\n\n

So, let\u2019s add some more components to our screen for uploading text and sound files by going to Designer View.<\/p>\n\n\n\n

Drag and drop another horizontal arrangement from Layout<\/strong> below the camera buttons one. Make the width: fill parent, height: 13% and align horizontal and align vertical both center.<\/p>\n\n\n\n

Drag and drop a textbox <\/strong>from the User Interface<\/strong> 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 \u201cSave\u201d.<\/p>\n\n\n\n

Drag and drop another button next to the save button and rename it to uploadTextFileBtn and change the text to \u201cUpload File\u201d.<\/p>\n\n\n\n

Select the second horizontal arrangement and duplicate it by pressing Ctrl + C and Ctrl + V<\/strong> on the keyboard for Windows<\/strong> OR Command + C and Command + V<\/strong> on the keyboard for MacOS.<\/strong><\/p>\n\n\n\n

Delete the text box from this arrangement. Rename the saveTextFileBtn2 to startRecBtn and change text in its properties to \u201cStart Rec\u201d. 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!<\/p>\n\n\n\n

So, rename it to stopRecUploadBtn and change the text in its properties to \u201cStop Rec & Upload\u201d.<\/p>\n\n\n\n

Now, drag a Sound Recorder<\/strong> component from the Media<\/strong> palette onto the viewer.<\/p>\n\n\n\n

We also need a File <\/strong>component so get it from the Storage<\/strong> palette.<\/p>\n\n\n\n

We have added all that we need for this project in the designer section so let\u2019s go back to the blocks section.<\/p>\n\n\n\n

When saveTextFileBtn is clicked, we want to save whatever is inside the Textbox as a text file.<\/p>\n\n\n\n

So, use File\u2019s saveFile procedure to do this. We need to provide a fileName but don\u2019t 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\u2019t 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. \u201c.txt\u201d<\/strong><\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The File component\u2019s 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\u2019t 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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Fortunately, there is a procedure in our downloaded extension for getting the App-specific directory\u2019s path where our text file was saved.<\/p>\n\n\n\n

So, add the following code to AfterFileSaved event for setting the textFileToUpload (text file\u2019s absolute path) to a join of app specific directory\u2019s path and the fileName.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

The uploadTextFileBtn code is the similar to uploadPicBtn code.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Last is our sound recording and uploading part.<\/p>\n\n\n\n

When startRecBtn is clicked, call soundRecorder to start.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

When the stop and upload button is clicked we will stop the sound recorder.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

And we are done.<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

I hope you liked this tutorial.<\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

<\/a>You can also watch the video tutorial for this part on my channel: Obsidian Soft.<\/p>\n\n\n\n

\n