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

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.

Play ;

Amit Agarwal is a web geek, solo entrepreneur and loves making things on the Internet. Google recently awarded him the Google Developer Expert and Google Cloud Champion title for his work on Google Workspace and Google Apps Script.

Awards & Recognition

Google Developer Expert

Google Developer Expert

Google awarded us the Developer Expert title recogizing our work in Workspace

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional title for 5 years in a row

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator award for technical expertise

Want to stay up to date?
Sign up for our email newsletter.

We will never send any spam emails. Promise 🫶🏻