Blueimp has an AngularJS version of jQuery File Upload available.
It includes a fileUpload
directive and a FileUploadController
with a submit()
method that you can call manually.
You can see a working version at http://blueimp.github.io/jQuery-File-Upload/angularjs.html.
One thing you should pay attention to: make sure you load all .js files from the example in the correct order to avoid problems (cf. source of the example page).
Hope that helps!
UPDATE AFTER YOUR COMMENT:
When using the AngularJS version of jQuery File Upload, you create a form tag with the file-upload
attribute like this:
<!-- Create a file upload form with options passed in from your scope -->
<form data-file-upload="options" data-ng-controller="YourController">
<!-- This button will trigger a file selection dialog -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<span>Add files...</span>
<input type="file" name="files[]" multiple="" ng-disabled="disabled">
</span>
<!-- This button will start the upload -->
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<span>Start upload</span>
</button>
<form>
Then in your controller you can assign the options for the jQuery File Upload like this:
angular.module('yourModule')
.controller('YourController', [$scope, function($scope){
// Options you want to pass to jQuery File Upload e.g.:
$scope.options = {
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
};
}]);
You can assign the submit()
handler to any ng-click
attribute as long as it is inside the form (and thus can access the method).
Let me know if you need further help...
EXTRA SAMPLE CODE FOR SUCCESS CALLBACK:
If you need to run a callback function after all uploads have been completed, you can listen to the fileuploadstop
event that is broadcasted by Blueimp:
// Listen to fileuploadstop event
$scope.$on('fileuploadstop', function(){
// Your code here
console.log('All uploads have finished');
});
Hope that helps!