Upload Files to Google Drive with Google Apps Script

Google Forms do not offer the file uploads feature but you can use Google Apps Script and let anyone upload files to Google Drive through an HTML web form.

For instance, you can share the form with your class, or with your clients, and they can directly upload school assignments, photographs, and other documents to a specific folder in your Google Drive.

There are two steps involved here. First you need to create an HTML form using HTML and CSS.

Here’s a sample form that uses the Materialize CSS library to give the standard Google Forms like material look to your file upload form.


<!-- Paste this into forms.html -->

<!-- Text input fields -->
<input id="name" type="text" placeholder="Your Name">
<input id="email" type="email" placeholder="Your Email">
<!-- File upload button -->
<input id="file" type="file">
<!-- Form submit button -->
<button onclick="submit(); return false;">Submit</button>
<!-- Show Progress -->
<div id="progress"></div>
<!-- Add the jQuery library -->
<script src="https://code.jquery.com/jquery.min.js"></script>

<script>

  var file, 
      reader = new FileReader();

  // Upload the file to Google Drive
  reader.onloadend = function(e) {
    google.script.run
      .withSuccessHandler(showMessage)
      .uploadFileToGoogleDrive(
         e.target.result, file.name, 
         $('input#name').val(), 
         $('input#email').val()
      );
  };

  // Read the file on form submit
  function submitForm() {
    file = $('#file')[0].files[0];
    showMessage("Uploading file..");
    reader.readAsDataURL(file);
  }

  function showMessage(e) {
    $('#progress').html(e);
  }

</script>

The server side Google Script code includes a function for processing the form input. It reads the uploaded file as a blob and saves the blob as a new file into your Google Drive. The file name, extension, and content type are preserved.

[*] The premium version of the file upload form (demo form) lets you visually create forms and allow file uploads of any size via the Google File Picker API.


/* The script is deployed as a web app and renders the form */
function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('forms.html')
    .setTitle("Google File Upload by CTRLQ.org");
}

function uploadFileToGoogleDrive(data, file, name, email) {

  try {

    var dropbox = "My Dropbox";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

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

    var contentType = data.substring(5,data.indexOf(';')),
        bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
        blob = Utilities.newBlob(bytes, contentType, file);

    folder.createFolder([name, email].join(" ")).createFile(blob);

    return "OK";

  } catch (f) {
    return f.toString();
  }

}

You can save the two files and deploy the Google script as a web app with access to anyone, including anonymous as shown in this GIF.