Angular directive that interact with the OneDrive Picker API :
Requirements: AngularJS 1.4+
- Using Bower (recommended)
bower install angular-onedrive-picker --save
OR
npm install angular-onedrive-picker --save
- Manually
Download https://github.com/samarhaider/angular-one-drive-picker/archive/master.zip
- Include OneDrive refefence to SDK
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
- Include the OneDrive Picker as a dependency for your app
angular.module('myApp', ['one-drive-picker'])
-
Configure the plugin (see below configuration section)
-
Create a scope to handle files that will be selected
angular.module('myApp', ['one-drive-picker'])
.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope.OneDrivedriveSuccess = function (files) {
console.log(files);
}
$scope.onOnedriveCancel = function () {
console.log('Onedrive close/cancel!');
}
}]);
- Add the directive to your HTML element
<a href="javascript:;" href="javascript:;" one-drive-picker on-onedrive-success="OneDrivedriveSuccess(files)" on-onedrive-error="onOnedriveError()" on-onedrive-cancel="onOnedriveCancel()">Open my OneDrive Drive</a>
- That's it, you're done!
In order to work, OneDrive Picker needs to connect to the OneDrive API using an application client ID and redirect URI. For more information on how to create an application, please refer to https://apps.dev.microsoft.com/#/appList. To do so, you'll need to configure the app.
angular.module('myApp', ['one-drive-picker'])
.config(['OneDriveSettingsProvider', function (OneDriveSettingsProvider) {
// Configure the options
OneDriveSettingsProvider.configure({
clientId: 'YOUR_CLIENT_ID', // One Drive Id 32 chars
action: 'download', // "share | download | query
openInNewWindow: true,
multiSelect: true,//one drive multiselect
advanced: {}
});
}])
The directive provide you 3 callbacks that you can use in order to work with the Picker.
This callback is triggered after you select files and click on the select
button from the Picker.
angular.module('myApp', ['angular-one-drive-picker'])
.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope.OneDrivedriveSuccess = function (files) {
// data contains the list of OneDrive files.
}
$scope.onOnedriveCancel = function () {
// after modal is closed with cancel button you can do something.
}
$scope.onOnedriveError = function () {
// when error occured.
}
}]);
<a href="javascript:;" href="javascript:;" one-drive-picker on-onedrive-success="OneDrivedriveSuccess(files)" on-onedrive-error="onOnedriveError()" on-onedrive-cancel="onOnedriveCancel()">Open my OneDrive Drive</a>
Licensed under the MIT license