Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

Google Apps Script to Upload File to Google Drive in Browser Using HTML & Javascript Web App

Posted on May 2, 2023

 

 

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

 

 

JavaScript
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

 

 

JavaScript
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

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme