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-uploadAdd 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"; /* or .min.css */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]), // Only works in newer browsers
aFile: $scope.myFile, // a jqLite type="file" element, upload() will extract all the files from the input and put them into the FormData object before sending.
}
}).then(
function (response) {
console.log(response.data); // will output whatever you choose to return from the server on a successful upload
},
function (response) {
console.error(response); // Will return if status code is above 200 and lower than 300, same as $http
}
);
}
});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/)
brew install nodejsthen
npm install -g grunt-cli karma-clithen from within angular-upload
npm install && bower installthen you can start the testserver up with
grunt webserverand you can access it through http://localhost:9001 and test the uploader
To run the tests
grunt testor run in autotest mode
grunt autotestAnd when you're done minify it
grunt package