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.
Please use following steps, I hope it will help:
- Add Package
yarn add react-google-picker
into your project, Package Link here
- Get your Google Developer Key, Client Id ready from https://console.developers.google.com
- 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 ;)