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 out the form, chose a file from your computer to upload and hit the submit button
- The file is uploaded to the folder defined in the apps script
- The link to the uploaded file is taken and it is inserted into 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 Editor and click the 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 the Execute as dropdown, select your email address so that the web app will be authorized to run using your account data.
- Select anyone for the Who has access field
- Click Deploy
- Click Authorize access button
- Chose an account (the email address you are currently working with)
- Go to the Advanced link at the bottom 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
This web app contains three files, namely Code.gs, JavaScript.html, and Index.html. The Code.gs files contain the server-side scripts and JavaScript.html, and Inde.html files contain the client-side scripts.
The code files are listed and briefly explained below.
Code.gs
The 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 the folder ID.
For the sheetName
variable, you should assign the name of the sheet (tab) that the records are to be saved. In this example, the tab name is “Data”.
The function doGet() creates the HTML page using Index.html file.
Keeping HTML, CSS, and JavaScript codes in a single file can make your project difficult to read and develop. So, it is recommended to separate JavaScript and CSS codes. The Include()
function includes the separated JavaScript file back into the Index.html file using a single line of code.
Once the user clicks the submit button, the client-side script calls the server-side function uploadFiles()
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 fileUrl
variable.
Then the upload file function returns the File URL to the client-side script.
Index.html
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.
The JavaScript codes are included in this file using the Include()
function described above.
JavaScript.html
This file contains the client-side scripts that are processed in the client’s browser.
The 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.
The function, handleFormSubmit()
passes the formObject
to the server-side function uploadFiles()
.
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.
Wrapping Up
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 Sheets.
References:
- Create spreadsheet alongside file upload with Google App Script
- HTML Service: Communicate with Server Functions
Do you know how to use multiple file uploader,, more than 10 files on one upload.
Hi admin,
Thank you so much for the awesome script. I just want to show users Saved Successfully to a new page instead of the same page, How can I do that?
Thanks
Thanks for this solution.
But can it be used to upload multiple files instead of just one file?
Hi,
This is very interesting, thank you for the blog post. If I understand correctly, this will allow anyone to load files to your drive.
I am making a web app, and I would like the person connecting to this web app to generate a link which will allow anyone following this link to upload to the person who generated the link’s drive (not mine). Is there any way to connect to a specific user’s drive instead of the webapp owner ?
Thank you for this script!
I am trying to add 2 more fields to the data, and I changed the index.html, and added the 2 formObject to the Code.gs, but the data doesn’t map correctly to the sheet. Do you have any idea what I’m missing?
Thanks!
Hi there,
I was wondering if we could also upload video and save it to google drive through this process?
Thanks
Hi do you have the option to add second buton to upload a second diferent file, thank you