{"id":14982145,"url":"https://github.com/softmonkeyjapan/angular-google-picker","last_synced_at":"2026-02-26T00:42:58.276Z","repository":{"id":20182151,"uuid":"23453159","full_name":"softmonkeyjapan/angular-google-picker","owner":"softmonkeyjapan","description":"An Angular directive that interact with Google Picker API","archived":false,"fork":false,"pushed_at":"2017-12-18T09:50:13.000Z","size":168,"stargazers_count":78,"open_issues_count":11,"forks_count":29,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-09-28T06:41:58.029Z","etag":null,"topics":["angularjs","google-picker","gulpjs","javascript"],"latest_commit_sha":null,"homepage":"http://softmonkeyjapan.github.io/angular-google-picker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/softmonkeyjapan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-08-29T05:01:48.000Z","updated_at":"2020-09-23T18:30:00.000Z","dependencies_parsed_at":"2022-07-27T01:02:15.038Z","dependency_job_id":null,"html_url":"https://github.com/softmonkeyjapan/angular-google-picker","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softmonkeyjapan%2Fangular-google-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softmonkeyjapan%2Fangular-google-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softmonkeyjapan%2Fangular-google-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softmonkeyjapan%2Fangular-google-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/softmonkeyjapan","download_url":"https://codeload.github.com/softmonkeyjapan/angular-google-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857795,"owners_count":16556052,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","google-picker","gulpjs","javascript"],"created_at":"2024-09-24T14:04:51.710Z","updated_at":"2025-10-29T11:31:14.739Z","avatar_url":"https://github.com/softmonkeyjapan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"angular-google-picker\n=====================\n\n[![npm version](https://badge.fury.io/js/angular-google-picker.svg)](http://badge.fury.io/js/angular-google-picker)\n[![Bower version](https://badge.fury.io/bo/angular-google-picker.svg)](http://badge.fury.io/bo/angular-google-picker)\n[![Coverage Status](https://coveralls.io/repos/github/softmonkeyjapan/angular-google-picker/badge.svg?branch=master)](https://coveralls.io/github/softmonkeyjapan/angular-google-picker?branch=master)\n[![Build Status](https://travis-ci.org/softmonkeyjapan/angular-google-picker.svg?branch=master)](https://travis-ci.org/softmonkeyjapan/angular-google-picker)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\nAngular directive that interact with the Google Picker API :\n* [Google Picker API Overview](https://developers.google.com/picker/)\n* [Google Picker API Docs](https://developers.google.com/picker/docs/)\n\n**Requirements:** AngularJS 1.2+\n\n**File Size:** 2.1Kb minified\n\n\n## Installation\n\n1. Using Bower (recommended)\n\n  ```Bash\n  bower install angular-google-picker --save\n  ```\n\n2. Using NPM\n\n  ```bash\n  npm install angular-google-picker --save\n  ```\n\n3. Manually\n\nDownload [https://github.com/softmonkeyjapan/angular-google-picker/archive/0.2.2.zip](https://github.com/softmonkeyjapan/angular-google-picker/archive/0.2.2.zip)\n\n\n## Usage\n\n1. Include Google client and api script in your layout\n\n  ```html\n  \u003cscript src=\"http://apis.google.com/js/client.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"http://apis.google.com/js/api.js\"\u003e\u003c/script\u003e\n  ```\n\n2. Include the Google Picker as a dependency for your app\n\n  ```js\n  angular.module('myApp', ['lk-google-picker'])\n  ```\n\n3. Configure the plugin (see below **configuration** section)\n\n4. Create a scope to handle files that will be selected\n\n  ```js\n  angular.module('myApp', ['lk-google-picker'])\n\n  .controller('ExampleCtrl', ['$scope', function ($scope) {\n     $scope.files = [];\n\n     $scope.onLoaded = function () {\n       console.log('Google Picker loaded!');\n     }\n\n     $scope.onPicked = function (docs) {\n       angular.forEach(docs, function (file, index) {\n         $scope.files.push(file);\n       });\n     }\n\n     $scope.onCancel = function () {\n       console.log('Google picker close/cancel!');\n     }\n  }]);\n  ```\n\n5. Add the directive to your HTML element\n\n  ```html\n  \u003ca href=\"javascript:;\" lk-google-picker on-picked=\"onPicked(docs)\" on-loaded=\"onLoaded()\" on-cancel=\"onCancel()\"\u003eOpen my Google Drive\u003c/a\u003e\n  ```\n\n6. That's it, you're done!\n\n\nEvery file is a json object that looks like :\n\n  ```json\n  [\n    {\n      \"id\": \"0B50DHrsuMky6UFlSQloxYGBxT2M\",\n      \"serviceId\": \"docs\",\n      \"mimeType\": \"image/jpeg\",\n      \"name\": \"DSC01845.JPG\",\n      \"type\": \"photo\",\n      \"lastEditedUtc\": 1409023514905,\n      \"iconUrl\": \"https://ssl.gstatic.com/docs/doclist/images/icon_11_image_list.png\",\n      \"description\": \"\",\n      \"url\": \"https://docs.google.com/file/d/0B50DHrsuMky6UFlSQloxYGBxT2M/edit?usp=drive_web\",\n      \"sizeBytes\": 1570863,\n      \"parentId\": \"0B50DHrsuMkx6cWhrSXpTR1cyYW8\"\n    },\n    {\n      ...\n    }\n  ]\n  ```\n\n\n## Configuration\n\nIn order to work, Google Picker needs to connect to the Google API using an application credentials (Api Key and client ID). For more information on how to create an application/project, please refer to [https://developers.google.com/drive/web/](https://developers.google.com/drive/web/). To do so, you'll need to configure the service.\n\n\n### Using configure(options)\n\n```js\nangular.module('myApp', ['lk-google-picker'])\n\n.config(['lkGoogleSettingsProvider', function (lkGoogleSettingsProvider) {\n\n  lkGoogleSettingsProvider.configure({\n    apiKey   : 'YOUR_API_KEY',\n    clientId : 'YOUR_CLIENT_ID',\n    scopes   : ['https://www.googleapis.com/auth/drive', 'another_scope', 'and_another'],\n    locale   : 'ja',\n    features : ['..', '..'],\n    views    : ['..', '..']\n  });\n}])\n```\n\n## Features\n\nThe Picker use the concept of views and features that allow you to customize it. The service provider allow you to enable some features to the Picker the same way you define your API Key or client ID (using either configure or setters).\n\n```js\nangular.module('myApp', ['lk-google-picker'])\n\n.config(['lkGoogleSettingsProvider', function (lkGoogleSettingsProvider) {\n  lkGoogleSettingsProvider.features(['MULTISELECT_ENABLED', 'ANOTHER_ONE']);\n}])\n```\n\n**Default** : `MULTISELECT_ENABLED` feature is use as default.\n\nPlease refer to [https://developers.google.com/picker/docs/reference](https://developers.google.com/picker/docs/reference) for more informations.\n\n\n### Views\n\nViews are objects that needs to be instanciate using the namespace `google.picker.*`. That namespace is already defined in the core of the directive. In order to add views to your picker, all you need to do is to define the class that needs to be used :\n\n```js\nangular.module('myApp', ['lk-google-picker'])\n\n.config(['lkGoogleSettingsProvider', function (lkGoogleSettingsProvider) {\n  lkGoogleSettingsProvider.views([\n    'DocsUploadView()',\n    'DocsView()'\n  ]);\n}])\n```\n\n**NOTE** : Views classes have some useful methods such as `setIncludeFolders` or `setStarred` (or any other methods available). In order to use them, just chain them to the class :\n\n```js\nangular.module('myApp', ['lk-google-picker'])\n\n.config(['lkGoogleSettingsProvider', function (lkGoogleSettingsProvider) {\n  lkGoogleSettingsProvider.views([\n    'DocsUploadView().setIncludeFolders(true)',\n    'DocsView().setStarred(true)',\n    'DocsView(google.picker.ViewId.FOLDERS).setSelectFolderEnabled(true)'\n  ]);\n}])\n```\n\n**Default** : `DocsUploadView` and `DocsView` are use as default.\n\nPlease refer to [https://developers.google.com/picker/docs/reference](https://developers.google.com/picker/docs/reference) for more informations.\n\n\n## Callbacks\n\nThe directive provide you 3 callbacks that you can use in order to work with the Picker.\n\n### `onLoaded`\n\nThis callback is triggered after the picker has been initialized and shown on the page.\n\n```js\nangular.module('myApp', ['lk-google-picker'])\n\n.controller('ExampleCtrl', ['$scope', function ($scope) {\n  $scope.onLoaded = function () {\n    console.log('Google Picker loaded!');\n  }\n}]);\n```\n\n```html\n\u003ca href=\"javascript:;\" lk-google-picker on-loaded=\"onLoaded()\"\u003eOpen my Google Drive\u003c/a\u003e\n```\n\n### `onPicked`\n\nThis callback is triggered after you select files and click on the `select` button from the Picker.\n\n```js\nangular.module('myApp', ['lk-google-picker'])\n\n.controller('ExampleCtrl', ['$scope', function ($scope) {\n  $scope.onPicked = function (docs) {\n    // docs contains the list of google documents object as shown above.\n  }\n}]);\n```\n\n```html\n\u003ca href=\"javascript:;\" lk-google-picker on-picked=\"onPicked\"\u003eOpen my Google Drive\u003c/a\u003e\n```\n\n### `onCancel`\n\nThis callback is triggered after the picker has been closed by clicking on the cancel button from the picker.\n\n```js\nangular.module('myApp', ['lk-google-picker'])\n\n.controller('ExampleCtrl', ['$scope', function ($scope) {\n  $scope.onCancel = function () {\n    console.log('Google picker close/cancel!');\n  }\n}]);\n```\n\n```html\n\u003ca href=\"javascript:;\" lk-google-picker on-cancel=\"onCancel\"\u003eOpen my Google Drive\u003c/a\u003e\n```\n\n## Demo\n\nThe demo version available at [http://softmonkeyjapan.github.io/angular-google-picker/](http://softmonkeyjapan.github.io/angular-google-picker/) can be found in the `example` folder.\nYou will need a server in order to try it on your local machine. Since the Google Picker demo application is setup to allow origin from localhost:8000, I encourage you to use the python `SimpleHTTPServer` :\n\n```shell\n$ cd path/to/the/example/directory\n$ python -m SimpleHTTPServer\nServing HTTP on 0.0.0.0 port 8000 ...\n```\n\nYou should now be able to browse to `localhost:8000` and see it in action from your localhost.\n\n## License\nLicensed under the MIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftmonkeyjapan%2Fangular-google-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftmonkeyjapan%2Fangular-google-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftmonkeyjapan%2Fangular-google-picker/lists"}