JarCastingangular-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)
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
$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
Contributing
- Fork it ( https://github.com/remotty/angular-plupload/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
