First off I began my script from the information that Sandy Good wrote at the following link. Google Forms file upload complete example. I did everything she said and it all worked.
Below are the .gs and .html files that I have modified to ask for additional information through a web form.
My problem with the script below is the fileBlob is not passing from the client side to the server side. I have tried replacing
google.script.run.withSuccessHandler(updateOutput).processForm(frmData);
with
google.script.run.withSuccessHandler(updateOutput).processForm($( "#myForm" )[0]);
but that fails and gives me the below error
Uncaught Error: Cannot find method createFile((class)).
I have found to be an empty fileBlob.
Additionally, I have tried calling the ID myFIle1 and could see the information in the console logs but still got the same error as above.
Could y'all please look through my script and provide information on why the fileBlob is empty. Have I missed something on the Google Developers site or this site? Thanks
Code.gs
function doGet(e) {
return HtmlService.createTemplateFromFile('Form')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setTitle('Name To Appear in Browser Tab')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function processForm(theForm) {
var emailAddress = theForm.email;
var projectName = theForm.projectName;
var zone = theForm.zone;
var fileBlob = theForm.myFile1;
var fldrSssn = DriveApp.getFolderById('folder ID');//you need to put your upload folder id here
var igeURL = fldrSssn.createFile(fileBlob).getId();
Logger.log("Code completed")
return true;
}
Form.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<?!= include('JavaScript'); ?>
<div id="GSAlogo">Insert Logo Band</div>
<table id="CompTool">
<tr><th><h1 id="header">Header Name</h1></th></tr>
<tr><td id="toolInfo">Tool Info.</td></tr>
<form id="myForm">
<tr><td><input name="email" type="email" placeholder="Insert email address"/></td></tr>
<tr><td>Select the project zone:</td></tr>
<tr><td><select>
<option name="zone" value="Arkansas Zone">Arkansas Zone</option>
<option name="zone" value="Austin Zone">Austin Zone</option>
<option name="zone" value="Border El Paso Zone">Border El Paso Zone</option>
<option name="zone" value="Border McAllen Zone">Border McAllen Zone</option>
<option name="zone" value="Border San Antonio Zone">Border San Antonio Zone</option>
<option name="zone" value="Dallas East Texas Zone">Dallas East Texas Zone</option>
<option name="zone" value="Fort Worth Zone">Fort Worth Zone</option>
<option name="zone" value="Houston Zone">Houston Zone</option>
<option name="zone" value="Louisiana Zone">Louisiana Zone</option>
<option name="zone" value="New Mexico Zone">New Mexico Zone</option>
<option name="zone" value="Oklahoma East Zone">Oklahoma East Zone</option>
<option name="zone" value="Oklahoma West Zone">Oklahoma West Zone</option>
<option name="zone" value="West Texas Zone">West Texas Zone</option>
</select></td></tr>
<tr><td><input type="text" name="projectName" value="test folder" placeholder="Please enter a project name"></td></tr>
<tr><td><input name="myFile1" id="myFile1" type="file" accept=".xls,.xlsx" /></td></tr><br/>
<tr><td><input type="button" id="formSave" value="Submit" style="background-color:#00449e; color:white;" onclick="disable(); fileUploadJS(this.parentNode)"/></td></tr><br/>
</form>
<br/>
<br/>
<tr><td id="status" style="display: none">
<!-- div will be filled with innerHTML after form submission. -->
Uploading. Please wait...
</td></tr>
</table>
</body>
</html>
Javascript.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
function disable(){
var fS = document.getElementById('formSave');
fS.disabled = true;
fS.style.color = "black";
fS.style.backgroundColor = "gray";
}
function fileUploadJS(frmData) {
document.getElementById('status').style.display = 'inline';
/*
The script below worked for passing the information to the client side but the fileBlob is blank
var formData = document.getElementById('myForm');
var email = formData[0].value;
console.log('email: ' + email);
var zone = formData[1].value;
console.log('zone: ' + zone);
var projectName = formData[2].value;
console.log('projectName: ' + projectName);
var fileBlob = formData[3];
console.log('fileBlob: ' + fileBlob);
var fileName = fileBlob.name;
console.log('fileName: ' + fileName);
var fileType = fileBlob.type;
console.log('fileType: ' + fileType);
var fileValue = fileBlob.value;
console.log('fileValue: ' + fileValue);
var fileFiles = fileBlob.files;
console.log('fileFiles: ' + fileFiles);
var modFormData = [email, zone, projectName, fileBlob];
*/
google.script.run
.withSuccessHandler(updateOutput)
.processForm(frmData);
}
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput() {
var outputDiv = document.getElementById('status');
outputDiv.innerHTML = "Your file was uploaded.";
console.log('script completed.')
}
function onFailure(error) {
var div = document.getElementById('status');
div.innerHTML = "ERROR: " + error.message;
}
</script>
