angular-dropbox-box-picker

A simple and cool angular directive which interacts with box and dropbox file pickers

Demo

http://geojacobm6.github.io/angular-dropbox-box-picker/

Installation

Download https://github.com/geojacobm6/angular-dropbox-box-picker/archive/master.zip

Usage

1. Include script in html

   <script src="dropbox-picker.min.js"></script>

   For Dropbox:

   <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs"  data-app-key="APP_KEY"></script>

   Don't forgot ot replace APP_KEY with appkey which get from dropbox app console https://www.dropbox.com/developers/apps For Box:

   <script type="text/javascript" src="https://app.box.com/js/static/select.js"></script>

2. Include the dropbox-picker as a dependency for your app

   angular.module('myApp', ['dropbox-picker'])

3. Configuration

   for more details about options got https://www.dropbox.com/developers/dropins/chooser/js and https://developers.box.com/the-box-file-picker/

    angular.module('DropboxControllers', ['dropbox-picker'])
   
     .config(['DropBoxSettingsProvider', function(DropBoxSettingsProvider) {
   
       // Configure the options
         DropBoxSettingsProvider.configure({
             linkType: 'preview',//dropbox link type
             multiselect: true,//dropbox multiselect
             extensions: ['.pdf', '.doc', '.docx'],//dropbox file extensions
             box_clientId: 'tdjpulviw9wzj20gd1t8rlh93vpvvh4m',// box CLient Id
             box_linkType: 'shared',//box link type
             box_multiselect: 'true'//box multiselect
           });
     }])
   

4. Create scope to handle choosed files

   
   .controller('DropBoxCtrl', ['$scope', 'DropBoxSettings', function($scope, DropBoxSettings) {
       $scope.dpfiles = []; // dropbox files will be here
   
       $scope.boxfiles = []; // box files will be here
   }]); 
   

5. Add the directive to your HTML element

   Dropbox:

     <a href="javascript:;" drop-box-picker dbpicker-files="dpfiles">Dropbox Picker</a>
   

   Box:

     <a href="javascript:;" box-picker boxpicker-files="boxfiles">Box Picker</a>
   

6. Done.