Доступ к данным из выбранного листа в Google Picker в приложении React - PullRequest
Новая
       25

Доступ к данным из выбранного листа в Google Picker в приложении React

0 голосов
/ 03 июня 2019

Я настраиваю приложение React, которое считывает данные из личных таблиц Google пользователей.

Я использую пакетact-google-picker и мне удалось получить fileId выбранного листа.Используя этот fileId и OAuthToken, я делаю HTTP-запрос с axios, который отвечает метаданными файла.Однако я хотел бы получить доступ к данным, содержащимся в самой электронной таблице, возможно, с помощью API Google Sheets.Как использовать данные ответов для доступа к электронной таблице или ее загрузки? 

import React, { Component } from 'react';

import GooglePicker from 'react-google-picker';

import axios from 'axios';

class App extends Component {
  state = {
    fileId: "",
    authToken: ""
  }
  componentDidUpdate() {
    console.log(this.state.fileId);
    console.log(this.state.authToken);
    const url = "https://www.googleapis.com/drive/v3/files/" + 
      this.state.fileId + 
      "?key=<MY-API-KEY>" + 
      "?alt=media";
    axios.get(url, {headers: {"Authorization": "Bearer " + this.state.authToken}})
      .then(response => console.log(response.data))
      .catch(error => console.log(error));
  }
  render () {
    return (
      <div>
        <GooglePicker clientId={'<MY-CLIENT-ID>'}
                      developerKey={'<MY-API-KEY>'}
                      scope={['https://www.googleapis.com/auth/drive.readonly']}
                      onChange={data => {
                        data.docs ? this.setState({fileId: data.docs[0].id}) : console.log('on change:', data);
                      }}
                      onAuthenticate={token => {
                        console.log('oauth token:', token);
                        this.setState({authToken: token});
                      }}
                      onAuthFailed={data => console.log('on auth failed:', data)}
                      multiselect={true}
                      navHidden={true}
                      authImmediate={false}
                      mimeTypes={['application/vnd.google-apps.spreadsheet']}
                      viewId={'SPREADSHEETS'}>
           <button>Click</button>
        </GooglePicker>
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 03 июня 2019

Вот пример кода из github : 

var files = data[google.picker.Response.DOCUMENTS];
// loop over selected files 
for (var i = 0; i < files.length; i++) {
    // get file id, and request to get the file
    var id = files[i][google.picker.Document.ID],
        request = gapi.client.drive.files.get({
            fileId: id
        });
    // execute request for file 
    request.execute(this._fileGetCallback.bind(this));
}

Обратите внимание, что вам нужно будет добавить эту строку enableFeature(google.picker.Feature.MULTISELECT_ENABLED) после this.picker = new google.picker.PickerBuilder(), чтобы включить выбор нескольких файлов.

Пример: 

_showPicker: function() {
            var accessToken = gapi.auth.getToken().access_token;
            this.picker = new google.picker.PickerBuilder().
                addView(google.picker.ViewId.DOCUMENTS).
                setAppId(this.clientId).
                setOAuthToken(accessToken).
                setCallback(this._pickerCallback.bind(this)).
                build().
                setVisible(true);
          enableFeature(google.picker.Feature.MULTISELECT_ENABLED) // added code
        },
...