Google picker在後續調用文件夾選擇時打開多個視圖

Question

我使用以下filepicker.js代碼，它可以正常顯示文檔和文件夾。當我打開谷歌選擇器顯示文件夾時，在隨後的調用中，多個選擇器將打開。

(function() { 
/** 
* Initialise a Google Driver file picker 
*/ 
var myType = 'empty'; 
var FilePicker = window.FilePicker = function (options) { 
    // Config 

    this.apiKey = options.apiKey; 
    this.clientId = options.clientId; 
    this.accesstoken = options.accesstoken; 
    myType = options.dType; 
    // Elements 
    this.buttonEl = options.buttonEl; 
    // Events 
    this.onSelect = options.onSelect; 
    this.buttonEl.addEventListener('click', this.open.bind(this)); 

    // Disable the button until the API loads, as it won't work properly until then. 
    this.buttonEl.disabled = true; 

    // Load the drive API 
    gapi.client.setApiKey(this.apiKey); 
    gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this)); 
    google.load('picker', '1', { callback: this._pickerApiLoaded.bind(this) }); 
} 

FilePicker.prototype = { 
    /** 
    * Open the file picker. 
    */ 
    open: function() {  

     // Check if the user has already authenticated 

     var token = gapi.auth.getToken(); 
     if (token) { 
      // alert(JSON.stringify(token) + " token status"); 
      this._showPicker(); 
     } else { 
      // The user has not yet authenticated with Google 
      // We need to do the authentication before displaying the Drive picker. 
      this._doAuth(true, function() { 
      // alert('in the doAuth ') 
       this._showPicker(); 
      }.bind(this)); 
     } 
    }, 

    /** 
    * Show the file picker once authentication has been done. 
    * @private 
    */ 
    _showPicker: function() { 
     var view = null; 
     if (myType == "Folder") { 
      view = new google.picker.DocsView(google.picker.ViewId.FOLDERS) 
        .setIncludeFolders(true) 
        .setMimeTypes('application/vnd.google-apps.folder') 
        .setSelectFolderEnabled(true); 
     } 

     if (myType=="DOC") { 
      view = google.picker.ViewId.DOCUMENTS; 
     } 

     if (myType == "PPT") { 
      view = google.picker.ViewId.PRESENTATIONS; 
     } 

     // alert("Final access token "+ this.accesstoken); 
     // alert(this.picker); 
     this.picker = new google.picker.PickerBuilder(). 
      addView(view). 
      setAppId(this.clientId). 
      setOAuthToken(this.accesstoken). 
      setCallback(this._pickerCallback.bind(this)). 
      build(). 
      setVisible(true); 
     console.log(view); 

    }, 
    /** 
    * Called when a file has been selected in the Google Drive file picker. 
    * @private 
    */ 
    _pickerCallback: function (data) { 
     if (myType == "DOC" || myType == "PPT") { 
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) { 
       var file = data[google.picker.Response.DOCUMENTS][0]; 
       url = file[google.picker.Document.URL]; 
       this._fileGetCallback(url); 
      } 
     } 
     if (myType == "Folder") { 
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) { 
       console.log(google.picker); 
       var url = JSON.stringify(data.docs[0]); 
       this._fileGetCallback(url); 

      } 
     } 
    }, 
    /** 
    * Called when file details have been retrieved from Google Drive. 
    * @private 
    */ 
    _fileGetCallback: function (abc) { 
     if (this.onSelect) { 
      this.onSelect(abc); 
     } 
    }, 

    /** 
    * Called when the Google Drive file picker API has finished loading. 
    * @private 
    */ 
    _pickerApiLoaded: function() { 
     this.buttonEl.disabled = false; 
    }, 

    /** 
    * Called when the Google Drive API has finished loading. 
    * @private 
    */ 
    _driveApiLoaded: function() { 
     this._doAuth(true); 
    }, 

    /** 
    * Authenticate with Google Drive via the Google JavaScript API. 
    * @private 
    */ 
    _doAuth: function (immediate, callback) { 
     gapi.auth.authorize({ 
      client_id: this.clientId, 
      scope: 'https://www.googleapis.com/auth/drive', 
      immediate: immediate 
     }, callback); 
    } 
}; 

如何停止製作多個Google視圖？

Answer 1

您可以針對各種視圖禁用feature。使用PickerBuilder.enableFeature和PickerBuilder.disableFeature來打開/關閉視圖。

下面是禁用多重選擇視圖中的示例代碼：

var picker = new google.picker.PickerBuilder().disableFeature(google.picker.Feature.MULTISELECT_ENABLED)