How to make HTTP request to upload file from reactjs to google drive?

Question

I'm kind of confused with the documentation. I did my research, little resources. Maybe someone can help me out. i'm using a CRNA - create-react-app. i have a button that suppose to upload a file using URI to Google Drive. I already have the initial steps like API key, client id, enable API like Drive api. I manage to make Google Picker work. but no luck with Google Drive upload.

There is a save-to-drive button embedded UI. just copy paste, works in plain HTML. But what i need is to create my own method to execute the upload process. Thank you all.

Answer 1

Please use following steps, I hope it will help:

1. Add Package yarn add react-google-picker into your project, Package Link here
2. Get your Google Developer Key, Client Id ready from https://console.developers.google.com
3. Implement following code:

Note: Do not forget to change 'YOUR_DEVELOPER_KEY_HERE', 'YOUR_CLIENT_ID_HERE' with your keys in following code:

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

This is how it looks ;)