angular-upload
Advanced tools
Upload files using FormData, fall back to iframe upload when FormData isn't supported
<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"; /* 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 nodejs
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
grunt webserver
and you can access it through http://localhost:9001 and test the uploader
To run the tests
grunt test
or run in autotest mode
grunt autotest
And when you're done minify it
grunt package
FAQs
AngularJS Upload, Handle your uploading with style
The npm package angular-upload receives a total of 217 weekly downloads. As such, angular-upload popularity was classified as not popular.
We found that angular-upload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.