Keywords: Google Apps Script | File Upload | HTML Service | Google Drive | Web Application
Abstract: This article provides a comprehensive guide to creating a web application with Google Apps Script HTML Service for uploading user files to Google Drive. It analyzes core code structures, including the doGet function, HTML form design, file processing logic, and permission configurations. The implementation covers basic setup, form submission handling, error prevention mechanisms, and deployment instructions, offering developers a complete reference for building custom file upload solutions.
Technical Background and Implementation Principles
While Google Forms supports file uploads, customizing its HTML source for advanced file handling is not feasible. This solution leverages Google Apps Script HTML Service to build a standalone web application, enabling interactive interfaces similar to websites. Client-side JavaScript collaborates with server-side Google Apps Script code to facilitate complete file transfer from user devices to specified Google Drive folders.
Core Code Implementation
The server-side code (Code.gs) includes two key functions: doGet() initializes the web app interface by loading an HTML template via HtmlService.createTemplateFromFile('Form'); processForm() handles form submissions, using DriveApp.getFolderById() to retrieve the target folder and createFile() to save the file Blob object to Google Drive. Pre-configuration of the target folder ID is required, or modify the code to dynamically locate folders by name.
The HTML file defines the user interface with file input controls and a submit button. The critical JavaScript function picUploadJs() employs the google.script.run client-side API to asynchronously call the server-side processForm function, preventing page refreshes. The withSuccessHandler() method specifies the success callback function updateOutput() to update the page status display. To avoid page navigation from default form submission, the code avoids the onsubmit attribute and uses a button's onclick event to trigger custom logic.
Deployment and Permission Configuration
After coding, save the first version via "Manage Versions," then "Publish as Web App." Initial execution requests permissions to access Google Drive; after granting, re-run the application. Permissions can be adjusted in Google Drive to control user access levels. The app link can be shared directly with users without additional domain configuration.
Advanced Discussions and Considerations
Using event.preventDefault() prevents default form submission, maintaining page stability. Practical development should include file type validation, size limits, and error handling, such as checking MIME types with fileBlob.getContentType(). Additionally, the Logger.log() function aids debugging by logging file details. For multi-file uploads, extend the HTML form with the multiple attribute and adjust server-side code to process multiple Blob objects iteratively.
This solution suits scenarios requiring custom file collection processes, like event registration attachments or document-sharing platforms. By integrating Google Drive's storage capabilities with Apps Script automation, developers can build flexible and reliable file management systems.