https://github.com/kieusonlam/vue-gpicker
Vue Google Picker Component
https://github.com/kieusonlam/vue-gpicker
google picker vue
Last synced: 3 months ago
JSON representation
Vue Google Picker Component
- Host: GitHub
- URL: https://github.com/kieusonlam/vue-gpicker
- Owner: kieusonlam
- Created: 2018-08-06T07:14:11.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:01:52.000Z (over 2 years ago)
- Last Synced: 2024-04-29T03:03:32.091Z (about 1 year ago)
- Topics: google, picker, vue
- Language: Vue
- Size: 3.05 MB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vue Google Picker
===================
[](https://www.npmjs.com/package/vue-gpicker)
Simple vue wrapper for [Google Picker API](https://developers.google.com/picker/docs/)
Based on [react-google-picker](https://github.com/sdoomz/react-google-picker)
Installation
============
```
npm install vue-gpicker
```
Usage
=====
```
console.log('on change:', data)"
:multiselect="true"
:navHidden="false"
:authImmediate="false"
:upload="true"
:mimeTypes="['image/png', 'image/jpeg', 'image/jpg']"
:viewId="'DOCS'">
```
## Authentication token
You might want to get the Oauth token in order to use it later, for example
in order to [download the selected file](https://developers.google.com/drive/v3/web/manage-downloads).
You can do so by using `onAuthenticate`:
```
console.log('on change:', data)"
@authenticated="(token) => console.log('oauth token:', token)"
:multiselect="true"
:navHidden="false"
:authImmediate="false"
:upload="true"
:mimeTypes="['image/png', 'image/jpeg', 'image/jpg']"
:viewId="'DOCS'">
```
## Custom build method
You can override the default build function by passing your custom function which receives two arguments:
- `google`: a reference to the window.google object.
- `access_token`: which you will need to pass to `setOAuthToken` method.
```
console.log('on change:', data)"
:multiselect="true"
:navHidden="false"
:authImmediate="false"
:upload="true"
:viewId='FOLDERS'
:createPicker="(google, oauthToken) => {
const googleViewId = google.picker.ViewId.FOLDERS;
const docsView = new google.picker.DocsView(googleViewId)
.setIncludeFolders(true)
.setMimeTypes('application/vnd.google-apps.folder')
.setSelectFolderEnabled(true);
const picker = new window.google.picker.PickerBuilder()
.addView(docsView)
.setOAuthToken(oauthToken)
.setDeveloperKey(DEVELOPER_KEY)
.setCallback(()=>{
console.log('Custom picker is ready!');
});
picker.build().setVisible(true);
}"
>
Click
```
This example creates a picker which shows folders and you can select folders.
Demo
====
```
npm install
npm serve
open http://localhost:8080
```
### [Don't forget to add new origins at console.developers.google.com](https://console.developers.google.com)