ngUpload
[NOT MAINTAINED PLEASE REFER TO ngUpload]
An AngularJS file upload directive. Demo http://ngupload.herokuapp.com
0.5.18 - for updates see CHANGELOG.md
Fullname:Gender:Favorite Color:Your picture (file will not be saved on the server):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;
Requirements
- AngularJS (http://angularjs.org)
Install with Bower
bower install ngUpload
Usage
Add to your html file
<script src="/js/ng-upload.js"></script>
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
Upload with Anchor
where the form can be submit with a Div or Anchor html element.
The AngularJS controller for the above samples is given as:
angular;
- 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 theirng-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 installnpm install grunt-cli -gnpm test
jshint
npm installnpm install grunt-cli -ggrunt jshint
Minify
npm installnpm install grunt-cli -ggrunt 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