scitpt to click browse and upload a file on website

We have created a number of Google Apps Script Web Apps that tin be used for data collection purposes in our previous blog posts. We included several types of form controls in those web apps, such every bit text fields, dropdowns, radio buttons, etc… This weblog post will show you lot how to create a spider web app to upload files to Google Bulldoze with Google Apps Script.

Y'all may also read the following blog posts on Google Apps Script Web Apps,

• How to Create Information Entry Form with Google HTML Service and Submit Data to Google Sheets
• How to Create an Online Data Entry Class 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 to a higher place web log posts to include the Google Apps Script file upload characteristic.

We created a form to collect contact details in the first post to a higher place. In this post, I will add a file upload feature to it. If yous are building a web app for the first time, I encourage you to read that post first.

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

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 make full the form, chose a file from your computer to upload and hit the submit button
• The file is uploaded to the folder ascertain in the apps script
• The link to the uploaded file is taken and it is inserted to the Google Sheets information table with the other details you provided in the class
• Then, a confirmation alert 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 mail, I volition not explain the code line by line. However, you lot tin can withal run the script by copying information technology to your Google Bulldoze without any noesis of coding.

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

Re-create the following Google Sail to your Drive.

Step 02 – Open the Apps Script File

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

Step 03 – Deploy as a web app

To generate the web page with the grade, y'all need to deploy the Apps Script as a web app. To practice that,

1. Go to the App Script Edititor and click Deploy push button at the height Right.
2. Then click New deployment
3. Select the deployment blazon as Web app from the gear icon
4. For Description type a name for this deployment
5. For Execute equally dropdown, slect your email address and then that the webb app will exist authorised to run using your business relationship data.
6. Select anyone for Who has access field
7. Click Deploy
8. Click Authorize admission button
9. Chose an account (the email address you are currntly working with)
10. Go to Adbanced link ad the botton left
11. Then click the link name "Get to …Your file name…" link at the lesser
12. Click Allow button at the bottom correct corner.
13. And then you will have 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 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 ix and x, in that location are 2 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 Bulldoze. To upload the file to some other folder, you should supercede the "root" with folder ID.

For the sheetName variable, you should assign the name of the sheet (tab) that the records to exist saved. In this instance, the tab proper noun is "Data".

The role doGet() creates the HTML page using Index.html file.

Keeping HTML, CSS, and JavaScript codes in a unmarried file tin make your project hard to read and develop. So, it is recommended to split up JavaScript and CSS codes. The Include() role 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 client-side script calls the server-side function uploadFiles() function.

When a user submits form data, the customer-side script calls the server-side script with the course object. Then, it checks for the file in the formObject and uploads the file to the folder you specified folderID variable and set the clarification 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 fault message to fileUrl variable.

Then the upload file part 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 data entry form. We have included the Bootstrap framework to add together CSS styles to the web app in the head section.

The JavaScript codes are included in this file using the Include() part 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 grade.

The function, handleFormSubmit() passes the formObject to the server-side office uploadFiles().

If the file upload and the saving record are successful, the returned value passes to the updateUrl() office. And then, it shows a hyperlink to the uploaded file just below the grade. Otherwise, it calls the onFailure() function and displays the fault bulletin.

Wrapping Up

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

This spider web app contains a information entry form with several course controls, including a file upload push. In one case a user fills and submits this grade, the selected file is uploaded to a prespecified binder in your Google Drive. And so, the other course information and the URL to the uploaded file are recorded in a Google Canvas. Then users can quickly locate the uploaded file by clicking the URL in the Google Canvas.

References:

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

hooverconesee1936.blogspot.com

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

Share this post