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>

integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<?!= include('JavaScript'); ?>

</head>

<body>

<p class="h4 mb-4 text-center">Contact Details</p>

<label for="first_name">First Name</label>

</div>

</div>

<p>Gender</p>

</div>

<label class="form-check-label" for="female">Female</label>

</div>

<label for="dateOfBirth">Date of Birth</label>

</div>

<label for="email">Email</label>

</div>

<label for="phone">Phone Number</label>

</div>

<label for="FormControlFile">Photo</label>

</div>

<br>

<button type="submit" class="btn btn-primary btn-block">Submit</button>

</form>

<br>

</div>

</body>

</html>

JavaScript.html

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/