Create File Loader Google Web App to Google Drive



× Filter Google Sheet In this post, I demonstrate how to create a File Loader Google Web App to Google Drive on Google Sheets. It works with such files as PNG, JPG, DOC, XLS, PDF, and many more.



How to Video:

---------------------------------------------
 

---------------------------------------------

Code.gs

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('UploadFile');
  htmlOutput.message = '';
  return htmlOutput.evaluate();
}


function doPost(e) {
  
  Logger.log(JSON.stringify(e));
  
  var destination_id = '';  // ID OF GOOGLE DRIVE DIRECTORY;
  var destination = DriveApp.getFolderById(destination_id);
  
  var data = Utilities.base64Decode(e.parameter.fileData);
  var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
  destination.createFile(blob);
  
  listRecord(e.parameter.username, e.parameter.fileName); 
  
  var htmlOutput =  HtmlService.createTemplateFromFile('UploadFile');
  htmlOutput.message = 'File Uploaded';
  return htmlOutput.evaluate();
  
}

function listRecord(username, filename)
{
  var url = '';  //URL OF GOOGLE SHEET;
  var ss= SpreadsheetApp.openByUrl(url);
  var recordsSheet = ss.getSheetByName("Records");
  recordsSheet.appendRow([username, filename, new Date()]);
}

function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}
---------------------------------

UploadFile.html

--------------------------------
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <script>
  function LoadFile(event)
  {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      console.log(e.target.result);
      var fileData = e.target.result.substr(e.target.result.indexOf(",")+1);
      var mimeTypeStart = e.target.result.indexOf("data:") + 5;
      var mimeTypeEnd = e.target.result.indexOf(";");
      var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
      var fileName = file.name;
      document.getElementById("fileData").value = fileData;
      document.getElementById("mimeType").value = mimeType;
      document.getElementById("fileName").value = fileName;
    };    
    reader.readAsDataURL(file);
  }
  </script>
  </head>
  <body>
    <h1>Web App File Loader</h1>
    <?var url = getUrl();?>
    <form method="post" action="<?= url ?>" >
      <table cellpadding="5px">
      <tr>
      <td>Username:</td>
      <td><input type="text" name="username" /></td>
      </tr>
      <tr>
      <td>File:</td>
      <td><input type="file" name="file" onchange="LoadFile(event)" />
      <input type="hidden" id="fileData" name="fileData" />
      <input type="hidden" id="mimeType" name="mimeType" />
      <input type="hidden" id="fileName" name="fileName" /></td>
      </tr>
      <tr>
      <td colspan="2"><input type="submit" value="Load File" /></td>
      </tr>
      <tr>
      <td colspan="2"><span><?= message ?></span></td>      
    </form>
  </body>
</html>

Post a Comment

أحدث أقدم

FREEONEKH FREE HERE

Available to print all kinds of small and large photos Such as: thick rubber - thin - black rubber - black and white sticker, snake cell reflection Glossy UV printing: on iron, on zinc, on resin, on wood, on rubber, on stickers, the best ink, guaranteed to last a long time without fading. Tel:093 560 878 / 066 73 75 95.

Download Here