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

twilson63
429 Stars 151 Forks 242 Commits 11 Opened issues

Description

An AngularJS Service for uploading files using iframe

Services available

!
?

Need anything else?

Contributors list

ngUpload

An AngularJS file upload directive. Demo http://ngupload.herokuapp.com

0.5.18 - for updates see CHANGELOG.md

   

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!
    $scope.response.style = {
      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

}; });

Requirements

  • AngularJS (http://angularjs.org)

Install with NPM

npm install ngUpload -S

Install with Bower

bower install ngUpload

Usage

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

or


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

ngUpload

  • 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.

uploadSubmit

  • 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='c.id as c.name 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 category.id. 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

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

Test

Needs Chrome Installed.

npm install
npm install grunt-cli -g

npm test

jshint

npm install
npm install grunt-cli -g

grunt jshint

Minify

npm install
npm install grunt-cli -g

grunt uglify

License

MIT

How to contribute

pull requests welcome.

please use the following style guidelines

(http://nodeguide.com/style.html)

Contributors

  • ADEBISI Foluso A. (https://github.com/adebisi-fa)
  • Hassan Alqaraguli (https://github.com/HassanAlqaraguli)
  • Jørgen Borgesen (https://github.com/jorgenfb)
  • cristianocd (https://github.com/cristianocd)
  • Evgeniy Zatsepin (https://github.com/dizzy7)
  • Chris Tesene (https://github.com/ctesene)
  • denyo (https://github.com/denyo)
  • mguymon (https://github.com/mguymon)
  • marek-stoj (https://github.com/marek-stoj)
  • Robert Coker (https://github.com/intelekshual)
  • Michael Guymon (https://github.com/mguymon)

Thanks

  • 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.