Google AppMaker文件上传示例及文档审批模板相关技术咨询

Hey there! While I can't share the exact .zip file of the Document Approval template, I can walk you through the core logic of the Drive Picker component for file uploads, plus answer your questions about upload destinations and Team Drive integration.

Drive Picker File Upload Core Logic #

Here's a simplified breakdown of how the Drive Picker handles uploads in such templates—this mirrors what you'd find in the template:

1. Initialize the Picker: First, load the Google Picker API client library and authenticate the user with the https://www.googleapis.com/auth/drive.file scope (or a broader scope if you need more access).

   function initPicker() {
     gapi.load('picker', () => {
       const uploadView = new google.picker.DocsUploadView();
       const picker = new google.picker.PickerBuilder()
         .addView(uploadView) // Enables the upload interface
         .setOAuthToken(gapi.auth.getToken().access_token)
         .setCallback(pickerCallback)
         .build();
       picker.setVisible(true);
     });
   }
   

2. Handle Upload Callback: When the user finishes uploading, the callback receives metadata about the file (like ID, name, and location). You can use this data to tie the file into your approval workflow.

   function pickerCallback(data) {
     if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
       const uploadedFile = data[google.picker.Response.DOCUMENTS][0];
       const fileId = uploadedFile[google.picker.Document.ID];
       // Add your approval workflow logic here (e.g., store the file ID in a database)
     }
   }
   

3. Permission Checks: Ensure the authenticated user has the necessary rights to upload to your target Drive location (more on this below for Team Drives).

Upload Destination Questions #

Let's tackle your specific questions one by one:

• Default upload location: When using DocsUploadView without specifying a parent folder, files are uploaded to the authenticated user's My Drive (the root of their personal Drive storage).
• Upload to a Team Drive's specific folder: Yes, this is totally possible! Here's how to set it up:
  1. Grab the target folder ID: Find the unique ID of your Team Drive folder in its URL (it's the long string between /folders/ and any query parameters).
  2. Modify the Picker initialization: Use the setParentId() method on the DocsUploadView to point to your Team Drive folder. Note that you'll need the https://www.googleapis.com/auth/drive scope (or drive.file if the user already has access to the folder) for Team Drive access.

     const uploadView = new google.picker.DocsUploadView()
       .setParentId('YOUR_TEAM_DRIVE_FOLDER_ID'); // Replace with your actual folder ID
     

  3. Validate permissions: The user authenticating the Picker must have edit access to the target Team Drive folder—otherwise the upload will fail.

Key APIs & Tools #

• Google Picker API: The primary tool for building the upload UI; it handles the file transfer and user interaction with Drive.
• Google Drive API: Use this if you need to perform post-upload actions (like setting file permissions, updating metadata, or moving files). For Team Drives, always include the supportsAllDrives: true parameter in your API requests.

Pro tip: When testing Team Drive uploads, use a user who has explicit access to the target folder—shared drives have stricter permission models than personal My Drive.

内容的提问来源于stack exchange，提问作者alep