upload file 1
引入外部連結CSS，以及jQuery。
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 = "Your google drive ID"; //Replace folder ID to upload files to a specific folder
var sheetName = "Sheet1"; //Replace the "Sheet1" 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();
}
}
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>
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>
參考文獻
bpwebs 附試算表，內有程式: https://www.bpwebs.com/upload-files-to-google-drive-with-google-apps-script/