Skip to content

Instantly share code, notes, and snippets.

@bpwebs

bpwebs/#Google Apps Script - Upload files to Google Drive

Last active September 10, 2024 15:43
Show Gist options
  • Save bpwebs/1749346375e38bb1d513486a973974e5 to your computer and use it in GitHub Desktop.
Save bpwebs/1749346375e38bb1d513486a973974e5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
#Google Apps Script - Upload files to Google Drive
Upload files to Google Drive using Google Apps Script Web Apps and save records in Google Sheets.
Raw
Code.gs
/**
* Upload files to Google Drive and save record to Google Sheet
* By www.bpwebs.com
* References: https://stackoverflow.com/a/26497772/2391195
* https://developers.google.com/apps-script/guides/html/communication#index.html_4
*/
var folderID = "root"; //Replace the "root"with folder ID to upload files to a specific folder
var sheetName = "Data"; //Replace the "Data" with your data sheet name
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* @Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function uploadFiles(formObject) {
try {
var folder = DriveApp.getFolderById(folderID);
var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
var fileUrl = "";
var fileName = "";
//Upload file if exists and update the file url
if (formObject.myFile.length > 0) {
var blob = formObject.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + formObject.first_name);
fileUrl = file.getUrl();
fileName = file.getName();
} else{
fileUrl = "Record saved without a file";
}
//Saving records to Google Sheet
sheet.appendRow([
formObject.first_name,
formObject.last_name,
formObject.gender,
formObject.dateOfBirth,
formObject.email,
formObject.phone,
fileName,
fileUrl,
Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);
// Return the URL of the saved file
return fileUrl;
} catch (error) {
return error.toString();
}
}
Raw
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Contact Details</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">First Name</label>
<input type="text" class="form-control" name="first_name" placeholder="Your full name..."/>
</div>
<div class="form-group col-md-6">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<p>Gender</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">Female</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="dateOfBirth">Date of Birth</label>
<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number">
</div>
<div class="form-group">
<label for="FormControlFile">Photo</label>
<input name="myFile" class="form-control-file" type="file" id="FormControlFile" />
</div>
<br>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<br>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
Raw
JavaScript.html
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject){
google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
if(isValidURL(url)){
div.innerHTML = '<div class="alert alert-success" role="alert"><a href="' + url + '">File uploaded successfully!</a></div>';
document.getElementById("myForm").reset();
}else{
//Show warning message if file is not uploaded or provided
div.innerHTML = '<div class="alert alert-danger" role="alert">'+ url +'!</div>';
}
}
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = '<div class="alert alert-danger" role="alert">'+ error.message +'!</div>';
}
function isValidURL(string) {
var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
return (res !== null);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment