An AngularJS Service for uploading files using iframe


Angular Core Dependency: >=1.0.4

Module License: MIT

Added by: Sam Deering





Stars: 392

Watchers: 392

Forks: 139


Tom Wilson
Tom Wilson

Module Description


An AngularJS file upload directive. Demo

0.5.8 - for updates see

   <form ng-upload="uploadComplete(content)" action="/upload-full-form">
           <input type="text" name="fullname" ng-model="fullname" />
           <input type="text" name="gender" ng-model="gender" />
           <label>Favorite Color:</label>
           <input type="text" name="color" ng-model="color"/>
           <label>Your picture (file will not be saved on the server):</label>
           <input type="file" name="file" />
           <input type="submit" class="btn" value="Submit" ng-disabled="$isUploading"  />
   <div class="alert alert-info">Server Response: {{response | json}}</div>
       Fullname: <b>{{response.fullname}}</b><br />
       Gender: <b>{{response.gender}}</b><br />
       Favourite Color: <span ng-style="">{{response.color}}</span><br />
       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 Bower

bower install ngUpload


Add to your html file

<script src="/js/ng-upload.js"></script>

Create a basic form with a file input element

<div ng-app="app">
  <div ng-controller="mainCtrl">
   <form action="/uploads" ng-upload="complete(content)">
     <input type="file" name="avatar"></input>
     <input type="submit" value="Upload" ng-disabled="$isUploading"></input>

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

<div ng-app="app">
  <div ng-controller="mainCtrl">
   <form action="/uploads" ng-upload="complete(content)">
     <input type="file" name="avatar"></input>
     <div style='cursor: pointer' upload-submit>Upload with Div</div> &bull;


<div ng-app="app">
  <div ng-controller="mainCtrl">
   <form action="/uploads" ng-upload="complete(contents)">
     <input type="file" name="avatar"></input>
     <a href='javascript:void(0)'
       class="upload-submit" >
         Upload with Anchor</a>

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 text/html not application/json

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 ng-model 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

Module stats last updated: 2018-01-08 16:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!