ngUpload

by twilson63

twilson63 / ngUpload

An AngularJS Service for uploading files using iframe

430 Stars 152 Forks Last release: Not found 242 Commits 41 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.