Create spreadsheet alongside file upload with Google App Script - google-apps-script

Question

I'm having a surprisingly hard time finding basic examples of setting something like this up. I'm pouring through the documentation, but the basic functions simply will not work. Could really use some advice.
I have file upload working thanks to another tutorial, but I would like to create a spreadsheet as well (or simply OPEN the spreadsheet if it already exists) to store additional info such as the name of the uploader, a URL of the file, etc. No dice!
SERVER.GS:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {
var ss = SpreadsheetApp.create("TEST123");
var sheet = ss.getSheets()[0];
// Appends a new row with 2 columns to the bottom of the
// spreadsheet containing the values in the array
sheet.appendRow(["Jackson Jones", "jJones#email.com"]);
var dropbox = "Student Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + form.myName);
return "File uploaded successfully " + file.getUrl();
} catch (error) {
return error.toString();
}
}
FORM.HTML:
<form id="myForm">
<input type="text" name="myName" placeholder="Your full name...">
<input type="file" name="myFile">
<input type="submit" value="Upload File"
onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
Of course eventually I would use form.myName and such to populate the spreadsheet, but I can't even get their example code to run.

Answer 1

It looks like you have some problems with your form syntax. Here is a version that will do what you are after -- it a modified version of the code tutorial present the Apps Script HTMLService documentation.
Note I am using IDs to identify the drop folder and log spreadsheet for convenience (note that more than one file/folder can have the same name in Drive, so use of IDs is generally preferable to finding files by name).
Code.gs:
var dropBoxId = "012345679abcdefg"; // Drive ID of 'dropbox' folder
var logSheetId = "abcdefghijklmnopqrstu123"; // Drive ID of log spreadsheet
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('InputForm.html');
}
function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + formObject.myName);
// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName]);
// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}
InputForm.html:
<form id="myForm">
<input type="text" name="myName" placeholder="Your full name..."/>
<input name="myFile" type="file" />
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(updateUrl)
.withFailureHandler(onFailure)
.uploadFiles(this.parentNode)" />
</form>
<div id="output"></div>
<script>
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
function onFailure(error) {
alert(error.message);
}
</script>
<style>
input { display:block; margin: 20px; }
</style>

Answer 2

5 Suggestion to Ryan Roth's Script:
1. "Timestamp" column is not created when somebody fills out form.
2. "required" field attribute not working.
3. The uploaded file should be submitted to google drive with folder created with uploader's name.
4. After submitting the form, the fields doesn't not refresh leaving the entered data as it is.
5. The standalone app is not embeddable in website.
If anyone have the updated script please do share below.