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:
Video Notes:
- Legacy Apps Script Editor Used in Video
- Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets
- Documentation Used in Video
- For Further Details on Deploying a Web App Click Here
Code in Video:
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;
}<!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>Related Posts
Create Custom HTML Form for Google Sheets - In this post, I demonstrate the steps on creating a Custom HTML Form for Google Sheets using Google Apps Script.
How to Link Between Google Web App Pages - In this post, I demonstrate how to link Web App HTML pages together and pass parameters to the Web App HTML pages using Google Apps Script.
How to Call Google Apps Script Function from Web App - In this post, I demonstrate how to call Google Apps Script Functions from Web App. I also show how to pass parameters in and out of functions.
How to Create Web App Form on Google Sheets - In this post, I demonstrate how to create a simple Web App form that populates Google Sheets using Google Apps Script.
Create Multi-Select Dropdown in Web App on Google Sheets - In this post, I demonstrate how to use a multi-select dropdown in a Web App on Google Sheets. This will in turn store the multiple values in a cell on Google Sheets.
Create Dependent Drop Down on Google Web App - In this post, I demonstrate how to create a dependent drop-down list in a Google Web App using Google Apps Script on Google Sheets.