How to direct user-uploaded files to a specific Google Drive folder

I am a programming novice, and turn to different codes and apps when I am faced with a problem and need a unique solution. I am an elementary computer teacher, and was looking for a way for students to upload files from home or from their phones, and into my Google Drive account. I found a solution on labnol.org1 using Google Apps Script.

I followed all instructions, and everything worked great. The files are successfully uploaded into my Google Drive Account. I eventually wanted to be able to rename the files based on user-inputed information from the form. I found a solution on this website. I made a few changes to the html and gs files…

html:

<form id="myForm"> 
<input type="text" name="myFirstName" placeholder="First Name">
<input type="text" name="myLastName" placeholder="Last 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>

<script>
function fileUploaded(status) {
    document.getElementById('myForm').style.display = 'none';
    document.getElementById('output').innerHTML = status;
}
</script>

Google Apps Script

function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}


function uploadFiles(form) {

try {

var dropbox = "Sample Form 3rd Grade";
var folder, folders = DriveApp.getFoldersByName(dropbox);

if (folders.hasNext()) {
  folder = folders.next();
} else {
  folder = DriveApp.createFolder(dropbox);
}

var blob = form.myFile; 
var fileBlob = form.myFile;
var fname = fileBlob.getName();
var newName = form.myLastName+form.myFirstName; // simple example
// extract extension using RegEx
// from http://stackoverflow.com/a/680982/1677912
var extensionfinder = /(?:.([^.]+))?$/; 
var ext = extensionfinder(fname)[1];
fileBlob.setName(newName+'.'+ext);
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + form.myFirstName+form.myLastName);

  return "<p> Thanks for uploading a photo for the technology project, " + form.myFirstName + "!";



} catch (error) {

return error.toString();
}

}

Again, everything works great. However, what I want to be able to do next is have the student choose their teacher’s name from a drop down list, and based on their response, the student’s file will be uploaded into a different folder. For example, if Student1 chooses Teacher1, I would like his file to be uploaded into Teacher1’s specified folder in my Drive Account. This is purely to keep things organized and save me time.

The new html is as follows:

<form id="myForm"> 
<font face="sans-serif">Select your teacher:</font>
<select id="teachers" name="teachers">
    <option value="teacher1">Teacher1</option>
    <option value="teacher2">Teacher2</option>
    <option value="teacher3">Teacher3</option>
    <option value="teacher4">Teacher4</option>
</select>
<input type="text" name="myFirstName" placeholder="First Name">
<input type="text" name="myLastName" placeholder="Last 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>

<script>
function fileUploaded(status) {
    document.getElementById('myForm').style.display = 'none';
    document.getElementById('output').innerHTML = status;
}
</script>

I have minimal experience working with Java and Google Apps Script, so I’ve tried many things that failed miserably. It is like working in the dark.

My biggest hurdle is accessing user inputted option values from the "teachers" element. Most answers I found regarding this issue consist of creating a conditional statement, which is the first thing I tried using If (document.GetElementById('teachers').value == "teacher1") {function… and so forth. However, I kept getting the “document is not defined” error, which I learned was because I was writing that script in the .gs file, not the html file. Hever, I noticed that user inputted text was accessible through form.myFirstName+form.myLastName. So I tried form.teachers.value in place of the document.GetElementById method. That also didn’t work.

I have spent hours and hours on this (which I’ll admit, has been fun learning new things over summer break), but I finally decided to seek some assistance. I’ve searched this website and others to learn how to do this. I suspect this is such a simple problem to be fixed, and that I am too inexperienced to even notice.

I’ve also considered creating different App Scripts for each individual classes, creating a “Teacher’s Name” text input, and a few other things to keep these files organized if I can’t get this figured out.

Thanks in advance for your help.

Answer

In the server side .gs code, try:

var whichTeacher = form.teachers;
Logger.log("whichTeacher: " + whichTeacher);//VIEW, LOGS to see print out to log

To see everything that is in the form object, you can loop through everything that is inside the object, and log the values, then VIEW the print out to the LOG:

for (var key in form) {
  Logger.log('key is: ' + key);
  Logger.log('value is: ' + form[key]);
};

Apps Script modifies the form object before sending it to the server. The object that the server receives is not structured like the form object in the browser HTML. There is no “value” property in the object in the Google server. Even though element has multiple options, only the option that is chosen is the value matched up to the name attribute and sent in the object.

The object that is received at the server is not really a HTML “form” object. It’s an object that has been changed.

Advertisement

Answer