angular-plupload

AngularJS directive for Plupload

Getting started

(1) Get angular-plupload via Bower

$ bower install angular-plupload

or add bower.json

$ bower install angular-plupload --save

(2) add javascript link to html

...
<script src="bower_components/plupload/js/plupload.full.min.js"></script>
<script src="bower_components/angular-plupload/dist/angular-plupload.min.js"></script>
...

(3) add 'angular-plupload' to your main module's list of dependencies

var myApp = angular.module('myApp', ['angular-plupload']);

(4) enjoy!

Quick example

app.js (global plupload setting)

Plupload setting

angular.module('myApp', ['angular-plupload'])
.config(function (pluploadOptionProvider) {
  // global setting
  pluploadOptionProvider.setOptions({
    flash_swf_url: '/bower_components/plupload/js/Moxie.swf',
    silverlight_xap_url: '/bower_components/plupload/js/Moxie.xap',
    max_file_size: '10mb',
    ...
  });
});

controller

basic

$scope.fileUpload = {
  url: '/posts/1/attachments'
}

edit setting

$scope.fileUpload = {
  url: '/posts/1/attachments',
  options: {
    multi_selection: false,
    max_file_size: '32mb',
    headers: {
      'token': 'xxx token'
    }
  }
}

use callback

Plupload event

$scope.fileUpload = {
  url: '/posts/1/attachments',
  callbacks: {
    filesAdded: function(uploader, files) {
      $scope.loading = true;
      $timeout(function() { 
        uploader.start(); 
      }, 1);
    },
    uploadProgress: function(uploader, file) {
      $scope.loading = file.percent/100.0;
    },
    fileUploaded: function(uploader, file, response) {
      $scope.loading = false;
      alert('Upload Complete!');
    },
    error: function(uploader, error) {
      $scope.loading = false;
      alert(error.message);
    }
  }
}

view

basic

<a plupload="fileUpload.url">
  Upload Button
</a>

basic (with static value)

<a plupload="'/upload'">
  Upload Button
</a>

edit setting

<a plupload="fileUpload.url"
   plupload-options="fileUpload.options">
  Upload Button
</a>

use callback

<a plupload="fileUpload.url"
   plupload-callbacks="fileUpload.callbacks">
  Upload Button
</a>

edit setting & use callback

<a plupload="fileUpload.url"
   plupload-options="fileUpload.options"
   plupload-callbacks="fileUpload.callbacks">
  Upload Button
</a>

Links

• Plupload
• Plupload API
• Plupload API#event
• Plupload API#settings

Contributing

1. Fork it ( https://github.com/remotty/angular-plupload/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request