AngularJS Upload, Handle your uploading with style

Downloads in past


1.0.139 years ago10 years agoMinified + gzip package size for angular-upload in KB


Angular Upload
Upload files using FormData, fall back to iframe upload when FormData isn't supported
- Works in all browsers - Lightweight - No dependency on jQuery


  class="btn btn-primary btn-upload"


Install via bower
bower install --save angular-upload

Add the module to your app dependencies and include it in your page
angular.module('app', [
<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!

Documentation over parameters

Upload button

The upload button masks the normal file input and makes it look like a button
  class="btn btn-primary btn-upload"

  // Mandatory, the url of the backend that is going to handle the upload

  // Optional, file param name for upload

  // Optional, object to send as form data with the upload

  // Optional, comma separated list or array of allowed mimetypes, defaults to allowing all types

  // Optional, Allow selecting multiple files, defaults to false

  // Optional, force all uploads through the iframe solution, defaults to false and should normally not be included

  // Optional, make file input required and add ng-invalid-required if required is set to true on the input button

  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)


Advanced documentation

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" />

angular.module('app').controller('AppCtrl', function ($scope, upload) {
  $scope.doUpload = function () {
      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.
      function (response) {
        console.log(; // 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

Build it yourself!

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 (
brew install nodejs
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