Как сделать HTTP-запрос на загрузку файла сactjs на диск Google?

Question

Я немного запутался с документацией. Я сделал свое исследование, мало ресурсов. Может быть, кто-то может мне помочь. Я использую CRNA - создать-реагировать-приложение. У меня есть кнопка, которая предполагает загрузку файла с помощью URI на Google Drive. У меня уже есть начальные шаги, такие как ключ API, идентификатор клиента, включить API, как Drive API. Мне удается заставить работать Google Picker. но без удачи с загрузкой Google Drive.

Имеется встроенный пользовательский интерфейс кнопки сохранения на диск. просто скопируйте вставить, работает в простом HTML. Но мне нужно создать собственный метод для выполнения процесса загрузки. Спасибо всем.

Answer 1

Пожалуйста, используйте следующие шаги, я надеюсь, это поможет:

1. Добавить пакет yarn add react-google-picker в ваш проект, Ссылка на пакет здесь
2. Получите ваш ключ разработчика Google, идентификатор клиента готов от https://console.developers.google.com
3. Реализуйте следующий код:

Примечание: не забудьте заменить YOUR_DEVELOPER_KEY_HERE, YOUR_CLIENT_ID_HERE ключами в следующем коде:

import React, {Component} from 'react';
import GooglePicker from 'react-google-picker';

class MyPage extends Component{
  render(){
   return (
      <GooglePicker clientId={'YOUR_CLIENT_ID_HERE'}
              developerKey={'YOUR_DEVELOPER_KEY_HERE'}
              scope={['https://www.googleapis.com/auth/drive.readonly']}
              onChange={data => console.log('on change:', data)}
              onAuthFailed={data => console.log('on auth failed:', data)}
              multiselect={true}
              navHidden={true}
              authImmediate={false}
              viewId={'DOCS'}
              mimeTypes={['image/png', 'image/jpeg', 'image/jpg']}
              createPicker={ (google, oauthToken) => {
                const googleViewId = google.picker.ViewId.DOCS;
                const uploadView = new google.picker.DocsUploadView();
                const docsView = new google.picker.DocsView(googleViewId)
                    .setIncludeFolders(true)
                    .setSelectFolderEnabled(true);

                const picker = new window.google.picker.PickerBuilder()
                .enableFeature(google.picker.Feature.SIMPLE_UPLOAD_ENABLED)
                  .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                    .addView(docsView)
                    .addView(uploadView)/*DocsUploadView added*/
                    .setOAuthToken(oauthToken)
                    .setDeveloperKey('YOUR_DEVELOPER_KEY_HERE')
                    .setCallback((data)=>{
                      if (data.action == google.picker.Action.PICKED) {
                          var fileId = data.docs[0].id;
                          alert('The user selected: ' + fileId);
                          picker();
                      }
                    });
                picker.build().setVisible(true);
            }}>
            <span>Click here</span>
            <div className="google"></div>
        </GooglePicker>
     );
   }
}

export default MyPage

Вот так это выглядит;)