Menu
How do I allow my viewers to use Google Forms to upload some files to my form and save it to my Google Drive?
I am looking for a complete example: It must tell what code to add to the example Google Form HTML source. How to use Google Apps Script to upload the viewer's file to my Google Drive account?
956
Allow people to attach filesIn Forms, open a form or quiz. and enter your request for information. and select File upload. If prompted, review the uploading information and click Continue.
Turn off Data Loss Prevention (or the file upload option will be greyed out) If your administrator has turned on data loss prevention this can also lead to the file upload option being greyed out as well.
You can choose between a maximum of 1, 5 and 10 when it comes to file uploads.
Google Forms can upload files, but this solution does not use Google Forms. This answer does not a modify a Google Form, which can't be done. This is an example that uses a Google Apps Script Web App, which is different than a Google Form. A Web App functions almost the same as a website, but you can't get a domain name for it.
Apps Script has a service named HTML Service, which is what this code uses. For the guide see: Create and Serve HTML
I you want to use an onsubmit attribute in the beginning form tag: <form onsubmit="myFunctionName()">, it will cause the Web App to disappear from the screen after the form submission.
If you are using a "submit" type HTML button, and want to continue to use it, you can try adding event.preventDefault(); to your code in the submit event handler function in order to keep the browser tab from trying to load different HTML. Or you'll need to use the google.script.run client side API.
A custom form for uploading files from a users computer drive, to your Google Drive can be created with the Apps Script HTML Service. This example requires writing a program, but I've provide all the basic code here.
This example shows an upload form with Google Apps Script HTML Service.
Google Apps Script
There are various ways to end up at the Google Apps Script code editor.
I mention this because if you are not aware of all the possibilities, it could be a little confusing. Google Apps Script can be embedded in a Google Site, Sheets, Docs or Forms, or used as a stand alone app.
Apps Script Overview
This example is a "Stand Alone" app with HTML Service.
HTML Service - Create a web app using HTML, CSS and Javascript
Google Apps Script only has two types of files inside of a Project:
Script files have a .gs extension. The .gs code is a server side code written in JavaScript, and a combination of Google's own API.
Copy and Paste the following code
Save It
Create the first Named Version
Publish it
Set the Permissions
and you can start using it.
Code.gs file (Created by Default)
//For this to work, you need a folder in your Google drive named: // 'For Web Hosting' // or change the hard coded folder name to the name of the folder // you want the file written to function doGet(e) { return HtmlService.createTemplateFromFile('Form') .evaluate() // evaluate MUST come before setting the Sandbox mode .setTitle('Name To Appear in Browser Tab'); } function processForm(theForm) { var fileBlob = theForm.picToLoad; Logger.log("fileBlob Name: " + fileBlob.getName()) Logger.log("fileBlob type: " + fileBlob.getContentType()) Logger.log('fileBlob: ' + fileBlob); var fldrSssn = DriveApp.getFolderById(Your Folder ID); fldrSssn.createFile(fileBlob); return true; } Create an html file:
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <h1 id="main-heading">Main Heading</h1> <br/> <div id="formDiv"> <form id="myForm"> <input name="picToLoad" type="file" /><br/> <input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" /> </form> </div> <div id="status" style="display: none"> <!-- div will be filled with innerHTML after form submission. --> Uploading. Please wait... </div> </body> <script> function picUploadJs(frmData) { document.getElementById('status').style.display = 'inline'; google.script.run .withSuccessHandler(updateOutput) .processForm(frmData) }; // Javascript function called by "submit" button handler, // to show results. function updateOutput() { var outputDiv = document.getElementById('status'); outputDiv.innerHTML = "The File was UPLOADED!"; } </script> </html> This is a full working example. It only has two buttons and one <div> element, so you won't see much on the screen. If the .gs script is successful, true is returned, and an onSuccess function runs. The onSuccess function (updateOutput) injects inner HTML into the div element with the message, "The File was UPLOADED!"
File, Manage Version then Save the first VersionPublish, Deploy As Web App then UpdateWhen you run the Script the first time, it will ask for permissions because it's saving files to your drive. After you grant permissions that first time, the Apps Script stops, and won't complete running. So, you need to run it again. The script won't ask for permissions again after the first time.
The Apps Script file will show up in your Google Drive. In Google Drive you can set permissions for who can access and use the script. The script is run by simply providing the link to the user. Use the link just as you would load a web page.
Another example of using the HTML Service can be seen at this link here on StackOverflow:
File Upload with HTML Service
Here is a link to a shared Apps Script Web App file with an input form:
Shared File - Contact Form
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
