Learn Google Apps Script Image and PDF Uploads to Google Drive Folder using Web App Script

so in this lesson we are going to be uploading content into our google drive and i'll show you how to do that and so what we're doing is we're going to create a folder on our google drive i'll just call it uploads and then going over to our web app we're gonna select files from our computer and then upload those files onto our google drive so once you've selected the file we can upload and once we press the upload button that will upload whatever file we've got within the input and so selecting upload i'm uploading this pdf and so now i'm can click the link and view the pdf and that's also sitting within the drive and then we can upload some images as well so select image from my computer click upload and that's going to add to the list of files so once again can click it and open up the file and as well you can see the files being uploaded within the drive so that's what we're going to be creating within the upcoming lessons and this is sitting within the google apps script web app where we're running the do get function to get the front end code which is contained within index.html and then this is javascript code selecting the page elements adding an event listener and then using the file reader in order to manage the upload of the content and so whenever the file is ready then we send it over to google apps script and we're sending the object data so the meme type the base64 data and the file name over to google apps script where it creates a blob from there and once it's within a blob format it's really easy to use the blob data to create a file from in this lesson we're going to be focusing on building up the front end code so that we can pass data back to the backend google apps script code so we're going to get rid of some of the contents that we did within the previous lesson where we were passing the data through and we don't need that actually anymore and also get rid of the styling as we don't need that either anymore and you can set up a title just like you would with any other client-side code so i'm calling it uploader v2 so that the title is going to match what we have within the apps script name and then we're also outputting some javascript here so we can get rid of that content as well so right now i'm just going to comment it out let's go back to dev we'll do a refresh and make sure that it's working so it doesn't look like uh it looks like we did have an issue there and i'll just gonna remove that all together and we'll try that one more time and now it looks like the dev is working so we're ready to continue to build this application so what we want to do is we want to pass some uploaded content from the front end to the back end and right now we're going to pass a an image object i and have that upload within our google drive and that's going to be set up and sent over to the google apps script from here we can create a function do the upload and it's going to get some data that's going to be passed in from the client side to the back end code and what we're going to do for right now is we're going to just do a return so that as we're developing it we can pass some data over and we can work with the content and the response object on the front end side so within the response object we're going to create that object here within the client within the google apps script code and for this we'll have a value of status so just do a boolean value of true so that we get some type of response back and then we'll be working through the data passing the data so how about we add that in as well so create a part of the object data and then whatever we've got for the data and so this we're going to actually so i need to have a comment comma there and what i'll do is i'll do a json and it will stringify the data and then we'll test passing the data from the html side over to the back end code so now that uh we've got the content here let's uh do some javascript coding where we're going to select an input value and then that data we're going to pass over to the end side and i'm actually going to open up the editor and run the code within the editor it's a little bit easier to read when we're doing the front end code as we're not have we don't have any google apps script code within this code i'll get rid of the script tags as well and as we develop it then we're going to copy and paste it back into the google apps script editor and try it out run it within the browser within the dev version so i'm opening up the editor that i use and that's going to be the visual studio code and of course you are welcome to use any editor that you're comfortable with as well as the google apps script editor as well and just opening up the editor here and creating a brand new file and let's save that file and this is just a file that i'm going to be running in the browser as i create the javascript and add the styling to the file so i'm just calling it uploaderv2.html and i'm copying and pasting the html code and actually let me get this updated code here and what i'll do is i'll do kind of a split screen here so updating the contents of the html file and we can save that and then whenever we want to run the html file i can just drag it over to the browser and that way we can see what we've got for the output of that file and minimize this so that again i can see the code on the left hand side and the browser window on the right hand side so i'm going to minimize some of the screens and this is only for recording purposes so that it is easier to see the code and as well as the results from the code so you don't have to do this of course as you're developing so selecting within the browser selecting inspect to open up the dev tools and then going over to console so that we're ready to pass over some javascript content so what we want to create is an input area where we can have the user have an input field and this is going to be file and the type of file or the type of input is going to be file as we're expecting the user to select a file to upload let's uh give it a class and i'll call it uploader and this is how we're going to select it with the javascript and we're going to add one more option here we're going to add a button and this button i'll give it a class of btn and that will give me a button to select to trigger the file upload so once we've selected it within the input then we can push the button and do the upload and i'll just write upload there on the file let's go over refresh it so we've got the choose file and the upload file and right now nothing is going to happen if you click it because we haven't attached any javascript to it so next up let's grab the object with javascript and we're going to select the contents of select the button object using the document and query selector and this is selecting the elements on the page so we want to select the button and we can do that by identifying the class of the button which is btn and also let's select the file contents so this is what we want to upload this is the content that we want to upload i'll just call it up file and i'm going to select the object with the class of uploader and i'll also do a word wrap so that editor content is easier to read and i'll make this slightly smaller so that we have more space for the coding so next let's do the add event listener so this is adding the event that we're listening for and the event that we're listening for is a click and then whenever it gets clicked then we want to upload file and i'm just going to create a function called upload file which will allow us to run this function every time the button is clicked so creating a function called upload file and we're going to be selecting the file contents from the input area so let's select that there and for this we're going to need the reader object so in javascript you can create a new file reader object and what that will do is that will create a file object that you can read and interact with within your javascript code there's more information about it over at the mozilla developer network so basically a file reader is an object that lets web app applications asynchronously read the contents of file so raw buffers and so on so basically you can read the contents of the file and then you can manage and handle the contents of the file and there's several event handlers for this file reader object and the one that we're going to be looking at is onload so what happens with the file reader onload whenever the this is an event that will trigger every time the read operation has successfully completed so once the browser has read the file contents then it's going to trigger the on load so this is where you can complete the uploading of the content and sending it over to the backend code and we can also read the data as a data url so that will turn the file contents of the specified blob and results into a data url so this allows us to select the file contents and pass it over to the google apps script as a blob and then we can use that blob within the apps script to create files from the blob and there's going to be data that's contained within this blob as well so that allows us to identify what type of file content it is that we want to create so let's uh bring all of this together where we're triggering that event the onload event uh whenever the button is clicked so saving the file upload and right now of course we don't have anything happening but that is being triggered you can also have a console message and i'm just going to say something like ready right now so whenever i click the button just to make sure that our button trigger is working properly so just refresh that and now i click the button it's running the contents of this function and that's exactly what we want because we want to trigger the next event which is the reader on load so reader and then whenever the file loads we can run an anonymous function and even pick up the event object of that function so we have to also identify what the source is of the reader object so i'll just type within here file ready and then just outside of it we can use the reader object and we can read as data url and this data url is going to be what the contents of the file input area is for the upload so let's select up files and up files is going to be equal to the contents so we're going to have an option to select multiple files and we're selecting that from the up file object and files and if we only want the first file we can do a 0 like that so we've got the data url and that's going to be reading the contents of up files object so save that and let's uh refresh and now let's add a file that we want to upload and add so we've got a few files here within the folder let's select them and then going back into the editor so now we've got a file there and when we click the upload button that's going to trigger the up load file function and it's going to run through creating the file reader object and the problem here is that it was expecting only one item and because up files has more than one so we need to set that otherwise we want to loop through the array of possible files so refresh i'll try that one more time so if you get that object and that error that means that you're trying to upload more than one file and it's not reading it as a file object because it's an array of items so we get the proper messages now that we've got ready and that the file is ready so that means that this file is ready to upload and we can pass that data back to the client side using the google apps script run so this is going to be now once we're ready with the reader file and the upload file we can ready and we can pass the data over and that file object is going to be sitting within result so once we're reading the data as url and that example here will show us that when we're finished reading and doing a reader data as url and this is actually also a good point that we want to make sure that we do have a file there before we try to read it so let's add in that condition to make sure that up files exists that we do have something there and then at that point then we can use the reader to try to read some of the content and just as an example for the mozilla developer network that now we've got the source is sitting as the reader result and it's converting the image file into a base 64 string so that's what we're going to output into the console and save that and we'll try this one more time so do a refresh as we've updated the code select the file that you want to use and then click upload and now we've got the base 64 of that image and let's also try the pdf and upload and so that also created the pdf there actually let me get rid of clear that and do the upload so as you can see there's quite a bit of data here and this instead of being the image we've got that file type here as uh pdf so we can use that and pick that up from the google apps apps script side of it as to what type of content it is so next up is to pass the content back to the google apps script and then of course you can update the front end code as needed so i'm just going to leave it fairly plain here and i'll upload i'll change this h2 to upload your file to drive as the h1 we'll clean up the code a bit and here is where we're going to be passing over the reader result and that's going to be going over to the google apps script so that we can handle that content so we can now close our editor or move it off to the side bring that into the google apps script save it within the index.html file go over to dev and let's uh just make sure that everything is working properly so selecting the file that we want to open click upload and there's the content that we're ready to upload so we're ready to bring that over to the back end side so just where we've got the reader result going into the console log let's use google script run and with success handler and what's uh success handler will do is that allows us to run a function once we've successfully managed and returned back the content from the google script site so right now what we're going to be doing is we're going to be doing a function call to this do upload function so we're referencing it here after the last dot there and do upload and then what we want to pass to the back end and that's going to be the contents of the reader result just as we're outputting it into the console so we're calling over to a function called success once we've successfully uploaded the content so let's create that as well within the within then the client side and this is going to get a response object that's returned back from the google apps script and i'm just going to be outputting that response object into the console so i've removed the reader result there i want to pass it over to the google apps script and then once this reader result data is passed over to the google apps script it's handled it successfully then on the client side is going to run the success function to complete the loop so let's uh take the upload data and right now we're just going to be stringifying the data and passing it back over to the client side so do a refresh we'll clear the terminal select the file and do an upload of the file and as we can see now the file data has made a round trip and we're getting it returned back as data and then this is the base64 content of that image so that means that we can retrieve it back on the google apps script side and then we can manage that content within the apps script so that's coming in under the data object and from the data object this is where we can use the base64 decode and create an image out of the contents so let's uh add in and what we want to do is we want to get the substring of the base64 so this will tell us the type of upload it is and i'll just call it data t and it's coming in as data and then using the javascript substring which is also within google apps script we're selecting the data object again and then we want to get the index of wherever base 64 is located base 64 comma and once we select that we're going to add 7 to that and we can also return that data t back into the object so that we can see it all from the browser and save and now let's uh clear and do an upload and when we do the data t that's showing us what the contents there are of the data object so next up let's create a file on the drive and we're going to be creating a file from the blob object and this uh we're just going to require some permissions so the file that we want to use and we can also specify a folder that we want to load it in if we don't specify a folder by default it'll go to the root so i am going to create a folder and i'll just call it uploads and then go over to the folder and in the web url you've got the folder and you can get the id of that folder so we can use that as the folder id so in order to select the folder and i'm actually going to put the id into a string value there so that we can use that as we're getting the folder object so this is where we need to use the drive app service drive app allows us to interact with the google drive or allows apps script to interact with the google drive and we want to get the folder by id so that will get the collect object that we want to use and this is where we want to drop the file contents in so you can also do the drive app and just create a file so that once again that will just create it on the root so if we want to create a file we can now use the folder object where we specified the drive and from there we can create a file and the file contents are going to be just whatever we've got within the data and if we want to get the file url we can now use the file object and get the url of the file so this is going to return back the path to the file and i'll add that into the response object so under fi file url and we'll just comma separate it out within the object so once we we run this we need to accept permissions so usually what i do is i'll try to run the do upload and that will trigger the permissions screen so that way we accept the permissions and we know that as we're debugging we can make sure that the script is running so what it's doing is it's allowing the google apps script to operate as my google account and there's the google apps script name of the file that's running and then these are the permissions that we've provided it so we can edit create delete uh on your google drive so i'm going to just simply allow it because i know this is my app that i've created so it looks like there is an error so let's see what happened here and the reason we threw an error is of course we didn't pass in any data but we have accepted the permissions so going back to where we've got our content and we don't need to refresh it because we're not changing any of the frontend code this is all backend so i can simply click upload again and we'll see what happens so it looks like we did throw an error so we got a little bit of troubleshooting to do and the reason for that error is because google apps script doesn't know what type of data it is so we have to separate out and specify the data type so we can do that on the front end code where we can split the data so once we've got the result we can split it by the commas and once again once we do the result will output some content here and these are going to be the different values for the response object and this is again coming from that data reader result and then once that comes in then we split it and we're going to split it via the comma so let's output this into the console so we can take a closer look and we can see what we've got and i'm also going to comment out the google apps script part of it for for now so let's do a refresh because we changed the client side code select the file do the upload and now because we're split splitting the results so the first part is going to be the meme type which is a base64 jpeg image and then this is the actual data that we want to use so this is the part that the google apps script needs to make use of once it's converting it back into a data format so let's actually want to pass it over as an object instead of just the result so let's create that object and this is again done within the back end code so just once again we'll remove that and instead of passing over the reader result we're going to pass over the object the data object that we're just about to create here so we want to set if we want to set up a file name we can pass that file name into the object so just call it test1 for now and we also want to select a meme type and so the meme type is going to be contained within the first data object adding it into the object that we're sending over and we can use a split for this and split it by the colon so what we want to extract out is this jpeg semicolon and then the base 64. so image forward slash jpeg so that's going to be the meme type there so we're just stripping out the contents after the first colon so returning back the result will result in that type of meme type and then also we want to of course be able to pass the data object over as well the values and that data is going to be just call it data and this is the entire data object of the base64 and that's going to be contained within vowels and the second item within the vowels and we can also output object so into the console to see what we're sending over and just do a quick refresh there i'll clear the contents and now let's try to send the content once again so we're throwing an error but this time we can see the content that we're sending over so file name is going to be test1 there's the meme type and there's the data object so going back into the apps script we can pick up this now and get the full data object and then we can make use of it so we don't need the substring in order to pick up the data type we can do that directly within the google apps script where we've identified the blob so we're using the utilities and let's uh get the blob using the utilities method and we want to create a new blob and so first up we want to extract out the existing blob so under utilities once again and the utility that we're using is a base 64 decode so we're decoding the contents of data and data so that's coming in or we can just rename it here as object to avoid any confusion so this is what we're sending over from that client side so object data and now this is going to become the blob object and now we can create a file from the blob and then for file we can set the name of the file so this is also contained within the object and coming from the client side we do have a file name so setting the object file name as the file of the content so let's see what happens now when we clear that and we do an upload and it looks like we're still throwing an error so let's continue to debug and for the utilities new blob it's actually expecting the object type the meme type so we've got that contained within the object and that's once again coming from the front end where we've already set the meme type so let's add in the meme type and then we can also add in the file name as well and so let's also pass in the file name directly from the object so you can get whatever the current files are that we're reading so whatever the current up files are that's where we can get the file name with the reader object just as we get the name we can also get the type so that just simplifies some of the code and let's uh try that selecting the file we'll use the same file do the upload and so there's our file name our file type so we need to pass that over to the google apps script within the blob utilities and just make sure that we've got this content properly so we are doing a decode of the data object we have made some changes uh we don't have the data t anymore uh we're using the object instead of data we don't need to set the file name because we're doing it within the utilities so let's clean up some of this code save it and we'll do a refresh and try to upload one of the files once again so open and upload and this time it looked like it worked so we did get the data coming back so we've got the full data object status and then we've got the url of that object that we can view so you can copy that and as well you can go over to your uploads folder and we can see if we've got the file open there so that can also be pasted in to the url and there's our image that we uploaded from the computer going over to the google drive let's try another item and we'll upload the pdf so that uploaded that pdf directly from the computer over to the app script and as well now that uh we've got it working so there is always some troubleshooting to do but once you get it working uh then you can customize the code so we are running this success object and it's returning back the url so if you want to have the url there we can save and do a refresh there so now it's going to be returning back the url of the file and we can put a hyperlink within our browser so that we can make use of that content so let's add in a div i'll give it a class of output and we'll select that with the javascript and this is where we're going to add all of the urls and then here set up an object called output using the document and query selector let's select the element with a class of output and i'm going to just append to output the new web url so it's going to be creating a link using the document create element the element that we're creating is going to be an anchor tag and then we're going to be appending that so within the link set the text content and that will equal the rep url or you can as well use the returned value as we're doing a response so we can do a response on the name as well so add that in so under the file name whatever the file name is that we want to that we've just uploaded so save that and now we're turning back an object called file name so text content will be under file name and let's uh get rid of the url so we get the whole response back and we can actually create a text node instead so let's do that we'll create a simple link text and using the document object we're going to create a text node and this is all just straight javascript and the text content will be whatever we've got response back for the file name and then using the javascript i can update this to be just an a for anchor tag and so now let's add all of that content together where we're gonna append it to the output area just make sure that we do have the elements with a class of output and let's start appending some of that content so for the output object using append we're going to append the hyperlink and then output and that's actually going to be the hyperlink append and this we're going to be appending the link text and also let's set the hyperlink href so we're going to be setting that hyperlink href to go to wherever we've got the rep url value save this and we'll try it out let's do a refresh because we changed the client side code let's select our file upload and wait for the response so it gets added to the page so there's our hyperlink added to the page we can also refresh the uploads directory so you can see all the new files and now we can actually click the file and open that up so it looks like there is some issue there because we're opening up on the same page so we need to set some attributes to the hyperlink and the attribute that we're setting is going to be the target attribute and we'll set that to be underscore blank so it opens up in a new page that's why we're throwing the error there and this usually does take a little bit of troubleshooting because it's not exactly as you would expect because this is a framed object that's sitting within the google apps script this should be set attribute instead of attributes and actually that should be set attribute so let's try that one more time now we've updated set the attribute do an upload and once it finishes loading we get the file name we can click it and we can open up that file on google drive that we've just uploaded so now that once we've completed the updates to the apps script you can clean it up as well and i usually like to comment out the console objects and save it go over to the google apps script add any commenting that you need within the google apps script and do any cleanup there as well and now you're ready to deploy it as a new deployment so this is a web app and i'll just call it ready and i'm actually going to limit the access only to myself as i don't want this generally to be a shared url so others can upload it into my google account and now i've got my web app url so let's uh refresh the executable version and notice that the url has changed so now we can close that and if you ever do lose what your managed deployments are you can always see whatever deployments that you've got and this is where you can get the new web app the executable url so let's try this or select a file do an upload of the file and now we can see that we're selecting files off our computer and we're uploading it to our google drive and then that file should be sitting within the google drive and so now you're welcome to make some updates to it you can also check the meme type so if you want to restrict it to particular meme types you can add in some conditions so if you don't want if you want to only limit it to jpegs or if you want p pdfs you can do that as well with a simple condition where you're uploading the content within the google apps script and this is where we're we've got the meme type within the object meme type so you can add in a condition there for only specific meme types in order to restrict the type of content that gets uploaded and then there's also of course all kinds of customizations you can do to the client side code

Channel: Laurence Svekis

Views: 980

Keywords: apps script, javascript, Google, Workspace, Learn, JSON, Data, web apps, coding, learning, svekis, laurence svekis

Id: 1cIkUafhhIk

Length: 39min 20sec (2360 seconds)

Published: Thu Sep 09 2021