We have created a number of Google Apps Script Web Apps that can be used for data collection purposes in our previous blog posts. We included several types of form controls in those web apps, such as text fields, dropdowns, radio buttons, etc… This blog post will show you how to create a web app to upload files to Google Drive with Google Apps Script.
You may also read the following blog posts on Google Apps Script Web Apps,
- How to Create Data Entry Form with Google HTML Service and Submit Data to Google Sheets
- How to Create an Online Data Entry Form that can Perform CRUD Operations on Google Sheets
- How to create a web form to get data from Google Sheets
- How to pull data from Google Sheets to HTML table
- How to Embed Google Apps Script Web Apps in Websites
We had several requests from our readers of the above blog posts to include the Google Apps Script file upload feature.
We created a form to collect contact details in the first post above. In this post, I will add a file upload feature to it. If you are building a web app for the first time, I encourage you to read that post first.
This web app is developed with a Container-bound Script. The Google Sheets linked below itself contains the Apps Scripts files discussed below.
How does the web app work?
The following image shows the web app’s user interface we will create.
This web app works as follows,
- You fill the form, chose a file from your computer to upload and hit the submit button
- The file is uploaded to the folder define in the apps script
- The link to the uploaded file is taken and it is inserted to the Google Sheets data table with the other details you provided in the form
- Then, a confirmation alert is shown below the data entry form with a link to the uploaded file.
The following video demonstrates the above process.
How to create the Web App to upload files to Google Drive with Apps Script
In this post, I will not explain the code line by line. However, you can still run the script by copying it to your Google Drive without any knowledge of coding.
Step 01 – Make a copy of the Google Sheet
Copy the following Google Sheet to your Drive.
Step 02 – Open the Apps Script File
In the Google Sheet menu, go to Extensions > Apps Script.
Step 03 – Deploy as a web app
To generate the web page with the form, you need to deploy the Apps Script as a web app. To do that,
- Go to the App Script Edititor and click Deploy button at the top Right.
- Then click New deployment
- Select the deployment type as Web app from the gear icon
- For Description type a name for this deployment
- For Execute as dropdown, slect your email address so that the webb app will be authorised to run using your account data.
- Select anyone for Who has access field
- Click Deploy
- Click Authorize access button
- Chose an account (the email address you are currntly working with)
- Go to Adbanced link ad the botton left
- Then click the link name “Go to …Your file name…” link at the bottom
- Click Allow button at the bottom right corner.
- Then you will have the URL to the web app at the bottom of the dialog box. Then Click on the URL to go to the web app.
The code files
The code files are listed and briefly explained below.
Code.gs file contains the server-side scripts.
In lines 9 and 10, there are two variables (folderID, sheetName) you may need to update.
I have assigned “root” for the
folderID variable. With this, the uploaded files are uploaded to the root of your Google Drive. To upload the file to another folder, you should replace the “root” with folder ID.
sheetName variable, you should assign the name of the sheet (tab) that the records to be saved. In this example, the tab name is “Data”.
The function doGet() creates the HTML page using Index.html file.
Once the user clicks the submit button, the client-side script calls the server-side function
When a user submits form data, the client-side script calls the server-side script with the form object. Then, it checks for the file in the
formObject and uploads the file to the folder you specified
folderID variable and set the description for the uploaded file.
If the file was successfully uploaded, the URL of the file is assigned to the
fileUrl variable. If not, it assigns the error message to
Then the upload file function returns the File URL to the client-side script.
The Index.html file contains the HTML codes which create the user interface. In this case, the data entry form. We have included the Bootstrap framework to add CSS styles to the web app in the head section.
Include() function described above.
This file contains the client-side scripts that are processed in the client’s browser.
preventFormSubmit function disables the default submit action of the form. This prevents the page from redirecting to an inaccurate URL upon submission of the form.
handleFormSubmit() passes the
formObject to the server-side function
If the file upload and the saving record are successful, the returned value passes to the
updateUrl() function. Then, it shows a hyperlink to the uploaded file just below the form. Otherwise, it calls the onFailure() function and displays the error message.
In this post, we discussed creating a web app to upload files to Google Drive with Google Apps Script.
This web app contains a data entry form with several form controls, including a file upload button. Once a user fills and submits this form, the selected file is uploaded to a prespecified folder in your Google Drive. Then, the other form data and the URL to the uploaded file are recorded in a Google Sheet. Then users can quickly locate the uploaded file by clicking the URL in the Google Sheet.