Need help with ngUpload?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

426 Stars 146 Forks 242 Commits 11 Opened issues


An AngularJS Service for uploading files using iframe

Services available


Need anything else?

Contributors list


An AngularJS file upload directive. Demo

0.5.18 - for updates see


Server Response: {{response | json}}
Fullname: {{response.fullname}}
Gender: {{response.gender}}
Favourite Color: {{response.color}}
Picture: {{response.pictureUrl}}

... and the context ngController's source is:

app.controller('Example5Ctrl', function ($scope) {
  $scope.uploadComplete = function (content) {
    $scope.response = JSON.parse(content); // Presumed content is a json string!
    $ = {
      color: $scope.response.color,
      "font-weight": "bold"

// Clear form (reason for using the 'ng-model' directive on the input elements)
$scope.fullname = '';
$scope.gender = '';
$scope.color = '';
// Look for way to clear the input[type=file] element

}; });


  • AngularJS (

Install with NPM

npm install ngUpload -S

Install with Bower

bower install ngUpload


Add to your html file

Create a basic form with a file input element

Some rule of thumb

  • Any html element that supports the click event can be used to submit the form marked with the ng-upload directive, as long as such elements are marked with the 'upload-submit' directive. If you use an input element with a type of submit then you do not have to mark it with upload-submit.
  • Make sure you import the 'ngUpload' module in your angularJS application.

Applying this rules, the sample above can be re-written as

Upload with Div


where the form can be submit with a Div or Anchor html element.

The AngularJS controller for the above samples is given as:

angular.module('app', ['ngUpload'])
  .controller('mainCtrl', function($scope) {
    $scope.complete = function(content) {
      console.log(content); // process content
  • Working in IE

In order, for ngUpload to respond correctly for IE, your server needs to return the response back as


Directive Options


  • upload-options-enable-rails-csrf
    : Turns on support for Rails' CSRF by adding a hidden form field with the csrf token.
  • upload-options-before-submit
    : function that gets triggered before the upload starts and if the function returns false it will cancel the submit.


  • upload-options-convert-hidden
    : Set the value of hidden inputs to their
    attribute when the form is submitted. One situation in which this is useful is when using select elements whose options are generated with ngOptions, for example:
    select[name='category_id' ng-model='category' ng-options=' as for c in categories']
    and where categories is
    [{id: 12, name: 'fred'}, {id: 65, name: 'wilma'}]
    Because Angular will generate options whose HTML element value is indexed on 0, the value submitted will be the value of the option and not the desired ng-model value which is Adding a hidden element whose ng-model matches the ng-model of the select element, combined with upload-options-convert-hidden='true' will workaround this issue.


Example of forms that posts to NodeJS server are now included under the /examples folder.


Needs Chrome Installed.

npm install
npm install grunt-cli -g

npm test


npm install
npm install grunt-cli -g

grunt jshint


npm install
npm install grunt-cli -g

grunt uglify



How to contribute

pull requests welcome.

please use the following style guidelines



  • ADEBISI Foluso A. (
  • Hassan Alqaraguli (
  • Jørgen Borgesen (
  • cristianocd (
  • Evgeniy Zatsepin (
  • Chris Tesene (
  • denyo (
  • mguymon (
  • marek-stoj (
  • Robert Coker (
  • Michael Guymon (


  • AngularJS Team
  • NodeJS Team
  • JavaScript Team

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.