Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/twilson63/ngUpload
An AngularJS Service for uploading files using iframe
https://github.com/twilson63/ngUpload
Last synced: 4 months ago
JSON representation
An AngularJS Service for uploading files using iframe
- Host: GitHub
- URL: https://github.com/twilson63/ngUpload
- Owner: twilson63
- Created: 2013-01-01T20:15:24.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2017-06-29T11:23:07.000Z (over 7 years ago)
- Last Synced: 2024-08-11T23:43:16.036Z (4 months ago)
- Language: JavaScript
- Homepage: http://twilson63.github.io/ngUpload
- Size: 9.52 MB
- Stars: 418
- Watchers: 27
- Forks: 137
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ngUpload
An AngularJS file upload directive. Demo [http://ngupload.herokuapp.com](http://ngupload.herokuapp.com)
## 0.5.18 - for updates see CHANGELOG.md
``` html
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:
``` js
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
``` html
```
### 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
``` html
Upload with Div •
```
or
``` html
```
where the form can be submit with a Div or Anchor html element.
The AngularJS controller for the above samples is given as:
``` js
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](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-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](https://github.com/twilson63/ngUpload/tree/master/examples) folder.
## Test
Needs Chrome Installed.
``` sh
npm install
npm install grunt-cli -g
npm test
```
## jshint
``` sh
npm install
npm install grunt-cli -g
grunt jshint
```
## Minify
``` sh
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