2016-10-25 25 views
2

Google Picker API(javascript)を使用して、Google Pickerから選択した画像(選択した複数の画像)のサムネイルを返信します。しかし結果は最初に選択された画像(1画像のみ)。誰でも私にこの問題を解決させる手助けをすることができますか?Google Picker APIから複数選択した画像を取得する方法

Screenshoot:

enter image description here

enter image description here以下

である私のjavascriptのAPI:

<!-- START PICKER --> 

<button type="button" id="pick">Pick File</button> 
    <pre id="fileInfo"></pre> 

    <script> 
(function() { 
    /** 
    * Initialise a Google Driver file picker 
    */ 
    var FilePicker = window.FilePicker = function(options) { 
     // Config 
     this.apiKey = options.apiKey; 
     this.clientId = options.clientId; 

     // 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) { 
       this._showPicker(); 
      } else { 
       // The user has not yet authenticated with Google 
       // We need to do the authentication before displaying the Drive picker. 
       this._doAuth(false, function() { this._showPicker(); }.bind(this)); 
      } 
     }, 

     /** 
     * Show the file picker once authentication has been done. 
     * @private 
     */ 
     _showPicker: function() { 
      var accessToken = gapi.auth.getToken().access_token; 
      var view = new google.picker.DocsView(); 
      view.setIncludeFolders(true); 
      this.picker = new google.picker.PickerBuilder() 
       .enableFeature(google.picker.Feature.NAV_HIDDEN) 
       .enableFeature(google.picker.Feature.MULTISELECT_ENABLED) 
       .addView(google.picker.ViewId.DOCS_IMAGES) 
       .setAppId(this.clientId) 
       .setDeveloperKey(this.apiKey) 
       .setOAuthToken(accessToken) 
       .setCallback(this._pickerCallback.bind(this)) 
       .build() 
       .setVisible(true); 
     }, 

     /** 
     * Called when a file has been selected in the Google Drive file picker. 
     * @private 
     */ 
     _pickerCallback: function(data) { 
      if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) { 
       var file = data[google.picker.Response.DOCUMENTS][0], 
        id = file[google.picker.Document.ID], 
        request = gapi.client.drive.files.get({ 
         fileId: id 
        }); 



      request.execute(this._fileGetCallback.bind(this)); 




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


      } 
     }, 

     /** 
     * 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.readonly', 
       immediate: immediate 
      }, callback); 
     } 

    }; 
}()); 
</script> 
    <script> 
     function initPicker() { 
      var picker = new FilePicker({ 
       apiKey: 'MY_API_KEY', 
       clientId: 'MY_CLIENT_ID-0bsroe3tqbfatoiie3h3qvaqtv4q0f5c.apps.googleusercontent.com', 
       buttonEl: document.getElementById('pick'), 
       onSelect: function(file) { 


        console.log(file); 


        document.getElementById('fileInfo').innerHTML = file.thumbnailLink; 
       } 
      }); 
     } 
    </script> 
<script src="https://www.google.com/jsapi?key=MY_API_KEY"></script> 
    <script src="https://apis.google.com/js/client.js?onload=initPicker"></script> 

<!-- END PICKER --> 

答えて

0

私は私が正しくあなたが選択することができました、あなたの懸念を理解願っています複数返された結果は1つだけです。可能であれば、Document.THUMBNAILSをお試しください。

これで、写真やビデオの属性を記述するサムネイルの配列は、コールバックデータのResponse.DOCUMENTSフィールドに格納されます。

重要な注意:選んだ項目はGoogleドライブに属している場合サムネイルは返却いたしません。

+0

あなたの答えをありがとう、これで私のコードを変更する方法を教えてください。道に迷いました –

関連する問題