BUY FULL SOURCE CODE
Welcome folks today in this blog post we will be uploading
file to google drive in browser using html
and javascript
in google apps script. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new code.gs
file and copy paste the following code
code.gs
1 2 3 |
function doGet(){ return HtmlService.createHtmlOutputFromFile('page'); } |
As you can see in the above code we are loading the page.html
file when the user open the web
app in the browser. This doGet()
automatically executes whenever app is deployed.
page.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <div class="message"></div> <form> <input name="upFile" type="file"> <input type="submit" value="add File"> </form> <script> const myForm = document.querySelector('form'); const myUpload = document.querySelector('input[name="upFile"]'); const message = document.querySelector('.message'); myForm.addEventListener('submit',(e)=>{ e.preventDefault(); message.textContent = 'Form Submitted'; const file = myUpload.files[0]; const fileR = new FileReader(); fileR.onload = function(e){ const vals = fileR.result.split(','); const obj = { fileName:file.name, mimeType :file.type, data : vals[1] } console.log(obj); google.script.run.withSuccessHandler(myResult).adderFile(obj); } fileR.readAsDataURL(file); }) function myResult(val){ message.innerHTML = `<a href="${val.url}" target="_blank">${val.name}</a>`; } </script> </body> </html> |
As you can see we have the simple input
field where we allow the user to upload the file to the google drive and then we have the button to upload the file to drive. And now we need to write the adderFile()
javascript function inside the google apps script as shown below
1 2 3 4 5 6 7 8 9 10 11 |
function adderFile(data){ const myFile = Utilities.newBlob(Utilities.base64Decode(data.data),data.mimeType,data.fileName); const id = '1RQL7dLKPi585HORVLLdPqDndf6FBxfIS'; const folder = DriveApp.getFolderById(id); const fileAdded = folder.createFile(myFile); const rep = { 'url' : fileAdded.getUrl(), 'name' : data.fileName }; return rep; } |
As you can see in the above code we are uploading the file to the folder
inside the google drive. And for this we are providing the id
of the google drive. And then we are returning the url
of the uploaded file in the browser.
Deploying the Web App
BUY FULL SOURCE CODE