I have been working on this apps script to create a registration form and I need help understanding how to use the app script to upload multiple files instead of one file.
So basically, what the app script does is that it submits my form response to google Sheets, Uploads the files from the registration form to a google drive folder, and records the link to the file to the spreadsheet also.
Apps Script is quite complex and there aren't so many resources online to learn and understand it better but I will appreciate it if I can get some help from anyone who understands it better than I do.
Below are my codes;
form.html code
<!doctype html>
<html lang="en">
<head>
<base target="_self">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container" id="app">
<!--- Frame kontak -->
<div class="z-depth-4" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;height:750px;" id="kontak">
<!-- <span class="black-text"></span> -->
<center><br>
<h6 style="font-size:18px;"><b>Sign Up</b></h6>
</center>
<div class="container">
<div class="input-field col s12">
<h6>Legal Name</h6>
<input style="color: black" type="text" id="d1" placeholder="Full Name">
<label for="input1"></label>
</div>
<div class="input-field col s12">
<h6>NIN</h6>
<input style="color: black" type="text" id="d2" placeholder="National Identity Number">
<label for="input2"></label>
</div>
<div class="input-field col s12">
<h6>Phone Number</h6>
<input style="color: black" type="text" id="d3" placeholder="000-0000-0000">
<label for="input3"></label>
</div>
<div class="input-field col s12">
<h6>Email</h6>
<input style="color: black" type="text" id="d4" placeholder="yourname@email.com">
<label for="input4"></label>
</div>
<div class="input-field">
<div class="col">
<h6>Gender</h6>
<select class="form-control" type="text" id="d5">
<option disabled selected value> -- select a gender -- </option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="input-field col s12">
<h6>Date of Birth</h6>
<input style="color: black" type="date" id="d6">
<label for="input6"></label>
</div>
</div>
<div class="input-field col s8">
<span style="font-size:15px; color:black;margin-left: 14px;"><b>Upload Your Picture</b></span>
<form>
<input style="color:black;margin-left: 14px;" type="file" name="myFile">
<span id="resp-spinnerA" class="spinner-border spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
<br>
<input style="color:white; background-color:#990099; display: none" class="multi-lainnya" type="button" id="submitBtn" value="Upload" >
</form>
</div>
<br/>
<div id ="divMainButton2" style="display: none">
<center> <button style="background-color: #4db6ac; color: white;" class="btn waves-effect waves-light" type="submit" name="mainButton2"><b>Create Profile</b><i class="material-icons right">send</i> </button>
<span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
<span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span>
<span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span>
</center>
</div>
<!-- Frame-->
</div>
<center><footer class="footer">
<section class="container">
<p style="font-size:10px;">
<a target="_blank"
href="https://www.youtube.com/channel/UCqYS1K6NeLAHW7_95keEtUg" title="JNC Edukasi">JNC Eduaksi</a>
<a style="color:green;" target="_blank"
href="https://wa.me/6282122532891" title="WA"> | Whatsapp</a>
<a style="color:red;" target="_blank"
href="https://www.youtube.com/channel/UCqYS1K6NeLAHW7_95keEtUg" title="Youtube"> | Youtube</a>
</p>
</section>
</footer></center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<?!= include("page-js"); ?>
</body>
</html>code.gs code
function doGet(e) {
return HtmlService.createTemplateFromFile("form").evaluate()
.setTitle("Sign Up - Safer Naija")
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
var url = "https://docs.google.com/spreadsheets/d/1IeyXsGAyq4LaYT6E7Mhz37umqnTzGLbJc8rpVvT8rwY/edit#gid=0";
var folderId = "1J8UvFldmZQsVE_XaRo7CTYts7PDlSeWw";
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function uploadFiles(data)
{
var file = data.myFile;
var folder = DriveApp.getFolderById(folderId);
var createFile = folder.createFile(file);
return createFile.getUrl();
}
function addNewRow2(rowData2) {
const currentDate = new Date();
var files = DriveApp.getFilesByName(rowData2.upload);
while (files.hasNext()) {
var file = files.next();
//var keteranganFile = file.getName()+' - '+ file.getUrl();
var linkFile = file.getUrl();
}
var ss = SpreadsheetApp.openByUrl(url);
ws = ss.getSheetByName("Data");
ws.appendRow([linkFile, rowData2.name, rowData2.nin, rowData2.phone, rowData2.email,
rowData2.gender, rowData2.dob, currentDate])
return true;
}page-js.html code
<script>
//script upload file
document.getElementsByName('myFile')[0].addEventListener('change',uploadFiles)
function uploadFiles(e){
if(document.getElementsByName('myFile')[0].value !== ""){
document.getElementById('resp-spinnerA').classList.remove("d-none");
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
} else {
sweetAlert({text: "Please select a picture", icon:"warning", timer:2000})
}
}
function onSuccess(data){
document.getElementById('resp-spinnerA').classList.add("d-none");
document.getElementById('submitBtn').value = "Uploaded";
sweetAlert({text: "Upload Successful!.", icon:"success", timer:2000})
document.getElementById('divMainButton2').style.display = "block";
}
//batas script upload file
document.getElementsByName("mainButton2")[0].addEventListener("click", afterButttonClicked2);
function afterButttonClicked2(){
var name = document.getElementById("d1");
var nin = document.getElementById("d2");
var phone = document.getElementById("d3");
var email = document.getElementById("d4");
var gender = document.getElementById("d5");
var dob = document.getElementById("d6");
var input = document.getElementsByName('myFile')[0];
var file = input.value.split("\\");
var upload = file[file.length-1];
var submit2 = document.getElementById('submitBtn');
var rowData2 = {
name: name.value,
nin: nin.value,
phone: phone.value,
email: email.value,
gender: gender.value,
dob: dob.value,
upload: upload
}
if(name.value == "" || nin.value == "" || phone.value == "" || email.value == "" || gender.value == "" || dob.value == "" || input.value == "" || submit2.value == "Upload"){
sweetAlert({text: "Warning!!!"+"\n\n"+"All fields are required!", icon:"error", timer:2000})
}else{
document.getElementById('resp-spinner5').classList.remove("d-none");
document.getElementById('resp-spinner6').classList.remove("d-none");
document.getElementById('resp-spinner7').classList.remove("d-none");
google.script.run.withSuccessHandler(afterSubmit2).addNewRow2(rowData2);
}
}
function afterSubmit2(){
document.getElementById('resp-spinner5').classList.add("d-none");
document.getElementById('resp-spinner6').classList.add("d-none");
document.getElementById('resp-spinner7').classList.add("d-none");
sweetAlert({text: "Success"+"\n\n"+"Data Sent", icon:"success", timer:2000})
//replace this HTML Address below with your own webApp address and delete "//" to activated the script
//window.open("https://script.google.com/", "_top");
}
</script>Project Screenshot below;
