Upload files using FormData, fall back to iframe upload when FormData isn't supported
Works in all browsers
Lightweight
No dependency on jQuery
< div
class = " btn btn-primary btn-upload "
upload-button
url = " /upload "
on-success = " onSuccess(response) "
> Upload </ div >
Install via bower
bower install --save angular-upload
Add the module to your app dependencies and include it in your page
angular . module ( ' app ' , [
' lr.upload '
] ) ;
< script src = ' bower_components/angular-upload/angular-upload.min.js ' > < / script >
and to your less/css if you want the upload button
@ import " bower_components/angular-upload/src/directives/btnUpload.less " ;
And you are good to go!
The upload button masks the normal file input and makes it look like a button
< div
class = " btn btn-primary btn-upload "
upload-button
// Mandatory , the url of the backend that is going to handle the upload
url = " /upload "
// Optional , file param name for upload
param = " file "
// Optional , object to send as form data with the upload
data = " formData "
// Optional , comma separated list or array of allowed mimetypes , defaults to allowing all types
accept = " {{acceptTypes}} "
// Optional , Allow selecting multiple files , defaults to false
multiple = " {{allowMultiple}} "
// Optional , force all uploads through the iframe solution , defaults to false and should normally not be included
force-iframe-upload = " {{forceIframeUpload}} "
// Optional , make file input required and add ng-invalid-required if required is set to true on the input button
required = " true|false "
on-upload = " onUpload(files) " // Optional callback when uploading starts
on-success = " onSuccess(response) " // Optional callback
on-error = " onError(response) " // Optional callback
on-complete = " onComplete(response) " // Optional , callback ( called on both on-success and on-error )
> Fileupload </ div >
The upload service that is used behind the scenes in the upload button, can be used in a controller by injecting upload
< body ng-app = " app " ng-controller = " AppCtrl " >
< input name = " myFile " type = " file " />
</ body >
angular . module ( ' app ' ) . controller ( ' AppCtrl ' , function ( $scope , upload ) {
$scope . doUpload = function ( ) {
upload ( {
url : ' /upload ' ,
method : ' POST ' ,
data : {
anint : 123 ,
aBlob : Blob ( [ 1 , 2 , 3 ] ) ,
aFile : $scope . myFile ,
}
} ) . then (
function ( response ) {
console . log ( response . data ) ;
} ,
function ( response ) {
console . error ( response ) ;
}
) ;
}
} ) ;
angular-upload is built with grunt and has a express backend for testing.
Start by installing npm if you don't have it already
via homebrew or homepage (http://nodejs.org/download/)
then
npm install -g grunt-cli karma-cli
then from within angular-upload
npm install && bower install
then you can start the testserver up with
and you can access it through http://localhost:9001 and test the uploader
To run the tests
or run in autotest mode
And when you're done minify it