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

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

In this tutorial, I will show you how to upload any file that you create in your app to a folder in Google Drive.<\/p>\n\n\n\n

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

So, let\u2019s start with this project. In this tutorial, I will work on the camera part from start to finish, and in the next tutorial, I will teach you how to upload sound and text files by making a generic procedure<\/strong> for uploading ANY<\/strong> file to Google Drive from MIT App Inventor.<\/p>\n\n\n\n

First of all, we need an extension for doing a special encoding of our files before uploading them to Google Drive.<\/p>\n\n\n\n

http:\/\/kio4.com\/appinventor\/277i_extension_imagen_string.htm<\/a><\/p>\n\n\n\n

Choose the one that says: com.KIO4_Base64.aix<\/p>\n\n\n\n

Open up MIT App Inventor and start a new project.<\/ins><\/p>\n\n\n\n

Upload the downloaded KIO4 extension and drag and drop it onto the viewer. <\/p>\n\n\n\n

Let\u2019s design the screen for the camera part:<\/p>\n\n\n\n

For screen1 properties, make align horizontal center. <\/p>\n\n\n\n

Drag and drop an Image component from the User Interface palette onto the viewer.<\/p>\n\n\n\n

Make height: 50% and width: fill parent.<\/p>\n\n\n\n

Drag and drop a Horizontal Arrangement from the Layout palette below this image.<\/p>\n\n\n\n

For its properties, make align horizontal and align vertical both center. Make height:13% and width: fill parent.<\/p>\n\n\n\n

From the User Interface palette, drag and drop a Button inside this horizontal arrangement.<\/p>\n\n\n\n

Rename to takePicBtn and change the text in its properties to Take Pic.<\/p>\n\n\n\n

Drag and drop another Button inside this horizontal arrangement.<\/p>\n\n\n\n

Rename to uploadPicBtn and change the text in its properties to Upload Pic.<\/p>\n\n\n\n

From the Media palette, drag and drop a camera component. We need this for taking photos.<\/p>\n\n\n\n

And from Connectivity, add a web component.<\/p>\n\n\n\n

From Sensors, add a clock sensor. We need this to generate our unique file names by adding timestamps to them. <\/p>\n\n\n\n

Go to the blocks section.<\/p>\n\n\n\n

Make global variables for scriptUrl and FolderId and give them empty text blocks. <\/p>\n\n\n\n

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

First, let\u2019s work on our script.<\/p>\n\n\n\n

Don\u2019t be daunted by these steps. If you follow me very carefully, it will not be difficult.<\/p>\n\n\n\n

Open up Google<\/a>. Search for “Google app scripts” in Google. We need to write some code in a programming language called Javascript so that we can connect with Google Drive. Go to the first link in search results.<\/p>\n\n\n\n

I will also give this link in the video description.<\/p>\n\n\n\n

https:\/\/www.google.com\/script\/start<\/a><\/p>\n\n\n\n

Press the button Start Scripting<\/strong>.<\/p>\n\n\n\n

Press the button for a new project and rename the project to Upload To GDrive.<\/p>\n\n\n\n

Copy and paste the following script in the given box:<\/p>\n\n\n\n

function doPost(e) {\n\n\u00a0\u00a0\u00a0\u00a0var data = Utilities.base64Decode(e.parameters.data);\n\u00a0 \u00a0 var blob = Utilities.newBlob(data, e.parameters.mimetype, e.parameters.filename);\n\u00a0 \u00a0 var fileID = DriveApp.getFolderById(e.parameters.folderId).createFile(blob).getId();\n\u00a0 \u00a0 return ContentService.createTextOutput(fileID);\n\n\u00a0\u00a0\u00a0\u00a0}<\/code><\/pre>\n\n\n\n
Press on the deploy button. Choose the New Deployment<\/strong> option.<\/p>\n\n\n\n
(***If at some later time, you edit your script i.e. the code written above, you need to redeploy by choosing “Manage Deployment” instead of “New Deployment” and increase the version. Every code change in the script requires redeployment)<\/em><\/p>\n\n\n\n
Click on the settings cog wheel, choose Web app, and change \u201cwho has access<\/strong>\u201d to Anyone<\/strong>. Press on the deploy button.<\/p>\n\n\n\n
Now, press the Authorize Access<\/strong> button. Choose google account and allow your project i.e. Upload to GDrive to change Google Drive.<\/p>\n\n\n\n
In the end, you will get a web app URL. Copy and paste it inside the scriptUrl global variable in your app inventor block section. <\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
We also need a Folder ID for our Google Drive. So, open up your Google Drive.<\/p>\n\n\n\n
https:\/\/www.google.com\/drive<\/a><\/p>\n\n\n\n
You might need to choose the Google account whose drive you want to upload to.<\/p>\n\n\n\n
Now right-click on Google Drive on the left-hand side and choose new folder. Rename appropriately. I am going to name it UploadFromAppInventor.<\/p>\n\n\n\n
Now, it is super important that we allow that anyone can write to this folder, and for this, we need to share<\/strong> this folder. So, right-click on the newly created folder and choose share. A dialog will open up. Change general access to anyone with the link and change the role to Editor.<\/strong><\/p>\n\n\n\n
Again, all these steps are super important and not a single step should be missed.<\/p>\n\n\n\n
Now, press done and double-click on the folder to open it. Copy its folder ID which is a mixture of letters and numbers after the last forward slash from the address bar in the browser. Now, come back to your project in MIT App Inventor and paste it in the block section for the global variable folderId.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Now, we need a few more global variables:<\/p>\n\n\n\n
imageToUpload<\/strong> will contain the file path of the picture taken by the camera. <\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
fileName<\/strong> will contain the unique file name for our image so that images are not overwritten in Google Drive.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
mimeType<\/strong> will contain the media type of file.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
When takePic button is clicked,  call the camera component\u2019s procedure TakePicture.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
This procedure will trigger the event AfterPicture of the camera so get that event and set the image1\u2019s picture to show the picture taken by the camera. This will be shown rotated in the app but will be uploaded properly to Google Drive.<\/p>\n\n\n\n
Also, set the imageToUpload variable to the image too.<\/p>\n\n\n\n
 I have already explained in my camera app tutorial that this image variable in the AfterPicture event is not the actual image but the file path for the image file so the imageToUpload now contains the path of the picture taken by the camera. Once the user is satisfied with the picture taken, he\/she can press Upload Pic button to actually upload it to Google Drive so get the click event for the uploadPic button.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
First, we are going to generate a unique file name for our image so set the global fileName to a join of the current time and a text block that says _Img.jpg.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Next, set the mime type to the appropriate type. I am trying to make it as generic as possible as later on we have to add uploading of text files and audio files to this app too so let\u2019s get the mime type programmatically instead of hard coding it by using our very cool extension. Add this after the setting of fileName in uploadPicBtn click event.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Set the web component\u2019s URL to the global script URL after setting the mimeType in the uploadPic button click event.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Next, we have to post Text to our web1 component in which we actually send the image data to Google Drive.<\/p>\n\n\n\n
So, call web component\u2019s PostText procedure.<\/p>\n\n\n\n
The text will be a join from Text blocks with 8 slots so click on cogwheel and add more slots to join block.<\/p>\n\n\n\n
Now, be very careful in filling up this join.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
The first slot is a text block that says filename= in lowercase<\/p>\n\n\n\n
The second slot is the get block for  our global variable fileName<\/p>\n\n\n\n
The third slot is a text block that says &folderId=<\/p>\n\n\n\n
Remember that I is capital in this word. Basically, we are following the exact code that we wrote in our script.<\/ins><\/p>\n\n\n\n
The fourth slot contains the get block for our global variable folderId.<\/p>\n\n\n\n
The fifth slot is a text block that says &mimetype=<\/p>\n\n\n\n
The sixth slot contains the get block for our global variable mimeType.<\/p>\n\n\n\n
The seventh slot is a text block that says &data=<\/p>\n\n\n\n
The eighth slot is important as we have to encode our image here.<\/p>\n\n\n\n
So, call web1\u2019s UriEncode procedure, and in text, we use our extension for encoding to Base64. We use the fileToString Direct procedure that takes in a file path. Now this file path expects an absolute path but there is a problem with our imageToUpload path. If I had used a notifier to see what is inside it, it would have shown me a file path looking like this file:\/\/\/storage\/emulated\u2026. We need to trim this file path and remove file:\/\/ so that it becomes something like this:  \/storage\/emulated… So, we replace the file:\/\/ in imageToUpload with an empty text block by using the replace block from text blocks.<\/p>\n\n\n\n
Our final uploadPicBtn click event looks like this:<\/p>\n\n\n\n
And we are done with the camera picture taking and uploading to Google Drive.<\/p>\n\n\n\n
Download<\/strong> aia file for this part<\/a><\/strong><\/p>\n\n\n\n
My next tutorial will be a continuation of this tutorial and we will work on adding sound and text uploading to Google Drive to it and making it more generic so that we can effectively upload any file to Google Drive using the same procedure.<\/p>\n\n\n\n
Part 2 of this Tutorial<\/strong><\/a><\/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