How To: Creating an Open Drop Box With Google Scripts

Earlier this month, I started an after school Coding Club for 7th and 8th graders. An unintended consequence has been a renewed inspiration to tackle my own coding challenges. This past summer, I was spending 25-35 hours a week learning HTML, CSS, Javascript, and some Ruby - but that all came to a screeching halt once the school year kicked into gear. 

I've been saying (thinking, really) that I wanted to first dive into creating Google Apps add-ons - not a focus of most of the online tutorials out there from the major online tutorial/training companies out there (like Code Academy and Treehouse). This past week, I discovered some great resources over at Alice Keeler's blog (itself a fantastic resource for all things Google Apps), and I started writing my first scripts using those tutorials. 

Doing a bit more digging into Google Scripts, I came across Amrit Agarwal's tutorial on "Google Form File Uploads" - a bit of a misnomer considering you're not using Google Forms at all. Agarwal's script uses a basic HTML form to allow a user to upload a file to the owner's Google Drive. While an open upload drop box poses some obvious security concerns, it's a fantastic resource for teachers like myself with 350 students and no student email accounts or Google accounts (although I've pushed hard on that, and Google accounts are rolling out soon, slowly but surely). 

For most of this school year, I've been searching for an alternative to the individual student drives housed (and only accessible from within) our school network. With the current setup, grading any work means sifting through dozens of student drives to locate each individual file - a seriously tedious and annoying task. With a few tweaks to Agarwal's script, I was able to create a drop box for my students that will sort name and sort their files into homeroom-specific folders on my Google Drive - no more sifting through student drives! 

The Basic Script

Agarwal's script used a bare-bones Google Script and HTML form: 

Click to view Agarwal's Script, unedited

Click to view Agarwal's HTML, unedited

As you can see, his script creates a single folder in the owner's Drive, titled "Student Files." This isn't as useful when you have multiple homerooms of students submitting work. To fix this, I made a few changes to the script: 

Edits

Instead of a single folder, I opted to create one folder for each homeroom:

try {

var dropbox = form.homeroom;
var folder, folders = DriveApp.getFoldersByName(dropbox + ' African Civ');

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

I also had to make some changes to the HTML form: 

 <select name="homeroom" placeholder="Select Homeroom">
 <option value=" "></option>
 <option value="6A Lunar">6A Lunar</option>
 <option value="6B Smith">6B Smith</option>
</select> 

This section created a drop-down menu where students are able to choose the appropriate homeroom. This way, when a student submits their assignment, homeroom-specific folders for the assignment are created in my drive. 

 

I also opted to add a feature to the script to rename each file. I have had issues with students not naming files correctly. While I will still will be urging (requiring) them to name their work according to the conventions I provide, this was one way of correcting the errors I know exist for the particular assignment I am collecting with this particular drop box. If I knew that students had the naming of files down, I might opt not to include this particular feature: 

var blob = form.myFile;    
    var file = folder.createFile(blob);  
    file.setName(form.firstName + form.lastName + ' African Civ Research Project');

Now, no matter what the student named their file originally, it will be correctly formatted and easily identifiable by name and assignment title in my Drive - they just have to upload the correct file. 

Final Changes

Agarwal's form is, as I said (and he points out) very bare-bones. The basic HTML included in his script includes just one line of CSS. 

Click to view Agarwal's bare-bones HTML form, unedited

The first change I made was to add an image and some headers to the <form> section of the HTML: 

<form id="myForm">
<img src="http://milwaukeecollegeprep.com/wp-content/themes/Milwaukee%20College%20Prep%20Schools/images/lt-bg-logo-xs.png"> 
<h1> Research Project Submission </h1>

<input type="text" name="firstName" placeholder="First name..">

<h3></h3>

<input type="text" name="lastName" placeholder="Last name..">

<h3>1. Select Your Homeroom</h3>

<select name="homeroom" placeholder="Select Homeroom">
 <option value=" "></option>
 <option value="6A Lunar">6A Lunar</option>
 <option value="6B Smith">6B Smith</option>
</select>

<h3>2. Locate and Select Your Research Project </h3>

<input type="file" name="myFile">

<h3>Submit Your Work!</h3>

<input type="submit" value="Upload File" 
 onclick="this.value='Uploading..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>

I also did some searching for basic HTML form CSS styling (ok, so I stole most of it from this website), and was able to come away with a more polished, official looking form in the end: 

Overall, it was a remarkably painless first project - Google Scripts is extremely user-friendly for the novice programmer. I'm looking forward to the next one (whatever that may be)!