Allow Multiple Files Upload on Google Apps Script

Nosotros have created a number of Google Apps Script Web Apps that can be used for data drove purposes in our previous blog posts. Nosotros included several types of form controls in those web apps, such as text fields, dropdowns, radio buttons, etc… This blog post volition show you how to create a web app to upload files to Google Bulldoze with Google Apps Script.

Yous may also read the following weblog posts on Google Apps Script Web Apps,

• How to Create Information Entry Course with Google HTML Service and Submit Data to Google Sheets
• How to Create an Online Information Entry Class that can Perform Crud Operations on Google Sheets
• How to create a web class to become data from Google Sheets
• How to pull data from Google Sheets to HTML table
• How to Embed Google Apps Script Spider web Apps in Websites

Nosotros had several requests from our readers of the above blog posts to include the Google Apps Script file upload feature.

Nosotros created a grade to collect contact details in the commencement mail service to a higher place. In this post, I will add a file upload feature to information technology. If you are edifice a web app for the starting time time, I encourage y'all to read that post outset.

This web app is developed with a Container-spring Script. The Google Sheets linked below itself contains the Apps Scripts files discussed below.

How does the spider web app work?

The following image shows the web app's user interface nosotros will create.

This web app works every bit follows,

• You fill the form, chose a file from your estimator to upload and hit the submit push
• The file is uploaded to the binder define in the apps script
• The link to the uploaded file is taken and it is inserted to the Google Sheets data tabular array with the other details you provided in the course
• And so, a confirmation alert is shown below the data entry form with a link to the uploaded file.

The following video demonstrates the above procedure.

How to create the Spider web App to upload files to Google Bulldoze with Apps Script

In this postal service, I will not explain the code line by line. Withal, y'all can nonetheless run the script by copying it to your Google Bulldoze without whatsoever noesis of coding.

Step 01 – Make a re-create of the Google Sheet

Copy the following Google Canvass to your Drive.

Step 02 – Open the Apps Script File

In the Google Sheet menu, go to Extensions > Apps Script.

Step 03 – Deploy every bit a web app

To generate the web folio with the form, you need to deploy the Apps Script as a web app. To exercise that,

1. Get to the App Script Edititor and click Deploy push at the top Right.
2. Then click New deployment
3. Select the deployment type every bit Spider web app from the gear icon
4. For Clarification type a name for this deployment
5. For Execute every bit dropdown, slect your e-mail address so that the webb app will exist authorised to run using your account data.
6. Select anyone for Who has access field
7. Click Deploy
8. Click Qualify access button
9. Chose an account (the e-mail address you are currntly working with)
10. Get to Adbanced link ad the botton left
11. Then click the link name "Get to …Your file name…" link at the bottom
12. Click Permit push button at the bottom right corner.
13. So y'all will have the URL to the web app at the lesser of the dialog box. Then Click on the URL to become to the web app.

The code files

This web app contains three files, namely Code.gs, JavaScript.html, and Alphabetize.html. The Lawmaking.gs files incorporate the server-side scripts and JavaScript.html, and Inde.html files comprise the customer-side scripts.

The lawmaking 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) y'all 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 Bulldoze. To upload the file to another folder, you should supervene upon the "root" with binder ID.

For the sheetName variable, you lot should assign the name of the sheet (tab) that the records to be saved. In this case, 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 tin make your project difficult to read and develop. And so, it is recommended to divide JavaScript and CSS codes. The Include() office includes the separated JavaScript file back into the Alphabetize.html file using a single line of code.

Once the user clicks the submit push button, the client-side script calls the server-side part uploadFiles() function.

When a user submits grade information, the client-side script calls the server-side script with the form object. Then, information technology checks for the file in the formObject and uploads the file to the folder you specified folderID variable and set up 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.

And 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 to a higher place.

JavaScript.html

This file contains the customer-side scripts that are candy in the client'due south browser.

The preventFormSubmit part disables the default submit activity of the form. This prevents the folio from redirecting to an inaccurate URL upon submission of the form.

The function, handleFormSubmit() passes the formObject to the server-side role 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 merely below the form. Otherwise, information technology calls the onFailure() function and displays the mistake message.

Wrapping Up

In this mail, we discussed creating a web app to upload files to Google Drive with Google Apps Script.

This web app contains a data entry grade with several form controls, including a file upload button. One time 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 Canvas. Then users tin chop-chop locate the uploaded file by clicking the URL in the Google Canvass.

References:

1. Create spreadsheet aslope file upload with Google App Script
2. HTML Service: Communicate with Server Functions

moralesawfus1951.blogspot.com

Source: https://www.bpwebs.com/upload-files-to-google-drive-with-google-apps-script/

Share this post