Upload Files to Google Drive with Google Apps Script

July 23, 2017

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>Submit</button>
<!-- Show Progress -->

<!-- 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.

PS: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.

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('forms.html').setTitle('Google File Upload by digitalinspiration.com');
}

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.

Google Apps Script Google Drive

ShareWhatsAppTwitterFacebook

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory