Googleappsscript for Uploading File as Email Attachment

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

You may also read the post-obit weblog posts on Google Apps Script Web Apps,

• How to Create Data Entry Grade with Google HTML Service and Submit Information to Google Sheets
• How to Create an Online Information Entry Course that can Perform Crud Operations on Google Sheets
• How to create a web form to get information from Google Sheets
• How to pull data from Google Sheets to HTML tabular array
• How to Embed Google Apps Script Spider 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 course to collect contact details in the first post to a higher place. In this post, I volition add a file upload feature to it. If you are edifice a spider web app for the first fourth dimension, I encourage you lot 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 spider web app work?

The post-obit prototype shows the web app'southward user interface we will create.

This web app works as follows,

• You fill up 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 table with the other details y'all provided in the course
• Then, a confirmation warning is shown beneath the data entry grade 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.

Stride 01 – Make a copy of the Google Canvass

Copy the following Google Sail to your Bulldoze.

Pace 02 – Open the Apps Script File

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

Footstep 03 – Deploy equally a web app

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

1. Go to the App Script Edititor and click Deploy push button at the top Right.
2. And so click New deployment
3. Select the deployment blazon equally Spider web app from the gear icon
4. For Description type a name for this deployment
5. For Execute every bit dropdown, slect your email address so that the webb app will be authorised to run using your business relationship data.
6. Select anyone for Who has access field
7. Click Deploy
8. Click Authorize access push
9. Chose an account (the email accost y'all are currntly working with)
10. Go to Adbanced link ad the botton left
11. Then click the link name "Go to …Your file proper noun…" link at the bottom
12. Click Allow push at the bottom right corner.
13. Then you volition accept the URL to the web app at the bottom of the dialog box. And so Click on the URL to go to the web app.

The lawmaking files

This spider 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 incorporate 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, at that place are two variables (folderID, sheetName) you may need to update.

I take 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 replace the "root" with folder ID.

For the 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.

Keeping HTML, CSS, and JavaScript codes in a single file can brand your project difficult to read and develop. So, information technology is recommended to separate JavaScript and CSS codes. The Include() part includes the separated JavaScript file back into the Index.html file using a single line of lawmaking.

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

When a user submits form information, the customer-side script calls the server-side script with the grade object. And so, it checks for the file in the formObject and uploads the file to the folder you lot 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 non, information technology assigns the error bulletin to fileUrl variable.

Then the upload file function returns the File URL to the customer-side script.

Index.html

The Index.html file contains the HTML codes which create the user interface. In this example, the information entry form. We accept included the Bootstrap framework to add together CSS styles to the web app in the head department.

The JavaScript codes are included in this file using the Include() function described higher up.

JavaScript.html

This file contains the client-side scripts that are processed in the client'south 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 role, handleFormSubmit() passes the formObject to the server-side part 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 bulletin.

Wrapping Up

In this post, we discussed creating a spider 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 binder 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 Canvas.

References:

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

correacappraid.blogspot.com

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

Share this post