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

function doGet(){
  return HtmlService.createHtmlOutputFromFile('page');
}

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

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

</form>

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

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;
}

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.

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

BUY FULL SOURCE CODE

Get Started

Deploying the Web App

BUY FULL SOURCE CODE