0

我有一个 Angular 11 webapp,允许用户从 Google Drive 传输文件。要选择文件,我使用 Google Drive Picker。一切正常,除了第二次使用 Picker 时,当用户单击 Select 按钮时 Picker 对话框不会关闭(它第一次正确关闭)。

// this service is based on based on https://stackoverflow.com/questions/51522954/angular-6-google-picker-api-popup
// Google Drive file picker reference: https://developers.google.com/picker/docs/reference
    import { Injectable } from '@angular/core';
    
    declare const gapi: any;
    declare const google: any;
    
    @Injectable({
        providedIn: 'root'
    })
    export class GoogleDriveService {
    
        constructor() { }
    
        // clientId and apiKey from GCP credentials page
        private clientId = '****.apps.googleusercontent.com';
        private apiKey = '***';
        // appId = project number from developers.google.com. See "Project number" under "IAM & Admin" > "Settings"
        private appId = '*****';
        private scope = 'https://www.googleapis.com/auth/drive.file';
        private picker: any;
    
        public oauthAccessToken = null;
        private pickerApiLoaded = false;
        private pickerCallback = null;
    
        public open(callback): void {
            this.pickerCallback = callback;
            gapi.load('auth', { 'callback': this.onAuthApiLoad.bind(this) });
            gapi.load('picker', { 'callback': this.onPickerApiLoad.bind(this) });
        }
    
        public close() {
            this.picker.setVisible(false);
            this.picker.dispose();
        }
    
        private onAuthApiLoad() {
            gapi.auth.authorize({
                'client_id': this.clientId,
                'scope': this.scope,
                'immediate': false,
            }, this.handleAuthResult.bind(this));
        }
    
        private onPickerApiLoad() {
            this.pickerApiLoaded = true;
            this.createPicker();
        }
    
        private handleAuthResult(authResult) {
            if (authResult && !authResult.error) {
                this.oauthAccessToken = authResult.access_token;
                this.createPicker();
            } else {
                console.warn('authResult', authResult);
            }
        }
    
        private createPicker() {
            if (this.pickerApiLoaded && this.oauthAccessToken) {
                // const view = new google.picker.View(google.picker.ViewId.DOCS);
                
                const docsView = new google.picker.DocsView(google.picker.ViewId.DOCS)
                    .setMode(google.picker.DocsViewMode.LIST)   // Display documents in a detailed list (the alternative is DocsViewMode.GRID, but that seems usesless as thumbnail generation fail)
                    // this code can be used to display folders (but unfortunatly not in a folder tree)
                    // .setIncludeFolders(true)
                    // .setMimeTypes('application/vnd.google-apps.folder, application/pdf')
                    // .setSelectFolderEnabled(true);
    
                this.picker = new google.picker.PickerBuilder()
                    .enableFeature(google.picker.Feature.NAV_HIDDEN)
                    .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                    .setAppId(this.appId)
                    .setOAuthToken(this.oauthAccessToken)
                    //.addView(view)
                    .addView(docsView)
                    //.addView(new google.picker.DocsUploadView())
                    .setDeveloperKey(this.apiKey)
                    .setCallback(this.pickerCallback)
                    .build();
                this.picker.setVisible(true);
            }
        }
    }

选择器第一次打开时,我在控制台中收到以下错误: 在此处输入图像描述

第二次看起来像这样: 在此处输入图像描述

有人对为什么 Google Drive Picker 对话框在第二次使用时没有关闭有任何建议吗?

4

0 回答 0