Google Forms file upload complete example

Question

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

User · Answer

As of October 2016  Google has added a file upload question type in native Google Forms  no Google Apps Script needed  See documentation

User · Answer

Update   Google Forms can now upload files   This answer was posted before Google Forms had the capability to upload files  This solution does not use Google Forms   This is an example of using an Apps Script Web App  which is very different than a Google Form   A Web App is basically a website  but you can t get a domain name for it   This is not a modification of a Google Form  which can t be done to upload a file  NOTE   I did have an example of both the UI Service and HTML Service  but have removed the UI Service example  because the UI Service is deprecated  NOTE   The only sandbox setting available is now IFRAME   I you want to use an onsubmit attribute in the beginning form tag    lt form onsubmit  quot myFunctionName   quot  gt   it may cause the form to disappear from the screen after the form submission  If you were using NATIVE mode  your file upload Web App may no longer be working   With NATIVE mode  a form submission would not invoke the default behavior of the page disappearing from the screen   If you were using NATIVE mode  and your file upload form is no longer working  then you may be using a  quot submit quot  type button   I m guessing that you may also be using the  quot google script run quot  client side API to send data to the server   If you want the page to disappear from the screen after a form submission  you could do that another way   But you may not care  or even prefer to have the page stay on the screen   Depending upon what you want  you ll need to configure the settings and code a certain way  If you are using a  quot submit quot  type button  and want to continue to use it  you can try adding event preventDefault    to your code in the submit event handler function   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  What You Need  Google Account Google Drive Google Apps Script - also called Google Script  Google Apps Script There are various ways to end up at the Google Apps Script code editor   Load Apps Script directly from the web address    https   script google com Open a Google Sheet first  then open Apps Script Go to your Google Drive  then Open Apps Script   https   drive google com drive  my-drive Go to your Google Drive  then click on an Apps Script project file Open Apps Script from Google Docs etc  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  quot Stand Alone quot  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 HTML  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    Start by   Create a new Blank Project in Apps Script Copy and Paste in this code   Upload a file with HTML Service  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        setSandboxMode     Defaults to IFRAME which is now the only mode available    function processForm theForm      var fileBlob   theForm picToLoad       Logger log  quot fileBlob Name   quot    fileBlob getName      Logger log  quot fileBlob type   quot    fileBlob getContentType      Logger log  fileBlob      fileBlob      var fldrSssn   DriveApp getFolderById Your Folder ID       fldrSssn createFile fileBlob          return true     Create an html file   lt  DOCTYPE html gt   lt html gt     lt head gt       lt base target  quot  top quot  gt     lt  head gt     lt body gt       lt h1 id  quot main-heading quot  gt Main Heading lt  h1 gt       lt br  gt       lt div id  quot formDiv quot  gt          lt form id  quot myForm quot  gt                lt input name  quot picToLoad quot  type  quot file quot    gt  lt br  gt           lt input type  quot button quot  value  quot Submit quot  onclick  quot picUploadJs this parentNode  quot    gt                    lt  form gt       lt  div gt       lt div id  quot status quot  style  quot display  none quot  gt     lt  -- div will be filled with innerHTML after form submission  -- gt    Uploading  Please wait     lt  div gt    lt  body gt   lt script gt   function picUploadJs frmData       document getElementById  status   style display    inline      google script run      withSuccessHandler updateOutput       processForm frmData          Javascript function called by  quot submit quot  button handler       to show results       function updateOutput            var outputDiv   document getElementById  status        outputDiv innerHTML    quot The File was UPLOADED  quot         lt  script gt   lt  html gt   This is a full working example   It only has two buttons and one  lt div gt  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   quot The File was UPLOADED  quot   Save the file  give the project a name Using the menu  File  Manage Version then Save the first Version Publish  Deploy As Web App  then Update  When 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 NOTES about deprecated UI Service  There is a difference between the UI Service  and the Ui getUi   method of the Spreadsheet Class  Or other class  The Apps Script UI Service was deprecated on Dec  11  2014   It will continue to work for some period of time  but you are encouraged to use the HTML Service  Google Documentation - UI Service Even though the UI Service is deprecated  there is a getUi   method of the spreadsheet class to add custom menus  which is NOT deprecated  Spreadsheet Class - Get UI method I mention this because it could be confusing because they both use the terminology UI  The UI method returns a Ui return type  You can add HTML to a UI Service  but you can t use a  lt button gt    lt input gt  or  lt script gt  tag in the HTML with the UI Service  Here is a link to a shared Apps Script Web App file with an input form  Shared File - Contact Form

[file-upload] Google Forms file upload complete example

Examples related to file-upload

Examples related to google-apps-script

Examples related to google-forms