angularjs-imageupload-directive/README.md

Upload and resize images with AngularJS. Proof of Concept.

Demo AngularJS imageupload Directive
===============================

## Description

imageupload Directive for [AngularJS](http://angularjs.org/)

## Usage

Please see the [demo](demo/front-end/demo.html) HTML for better and tested examples.

## Features

- Upload Image with FileReader
- Resize Image via canvas
- Make image cover certain size while maintaining its original height-width ratio
- Choose cover origin ( left - center - right / top - center - bottom )
- Send Image Data URL (base64) to whatever you want.
- External Drag and Drop support

### Single image 

```html
<button
    input-image
    ng-model="image"
    ng-change="uploadImage(image)">
</button>
<img ng-show="image" ng-src="{{image.url}}" type="{{image.file.type}}" />
```

The image object has the following properties:

- file
- url
- dataURL

### Single image with resizing

```html
<button
    input-image
    append-data-uri
    resize
    resize-max-height="300"
    resize-max-width="250"
    resize-quality="0.7"
    ng-model="image">
</button>

<img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/>
```

The image object has the following properties:

- file
- url
- dataURL
- resized
    - dataURL
    - type

### Multiple images with resizing

```html
<button
    input-images
    append-data-uri
    append
    resize
    resize-max-height="300"
    resize-max-width="250"
    resize-quality="0.7"
    ng-model="images">
</button>

<p>Original</p>
<img ng-show="images" ng-src="{{images[0].dataURL}}" type="{{images[0].file.type}}"/>
<p>Resized</p>
<img ng-show="images" ng-src="{{images[0].resized.dataURL}}"/>
```

When used with multiple the image object is always an array of objects with the following properties:

- file
- url
- dataURL
- resized
    - dataURL
    - type

### Single image with covering

```html
<button
    input-image
    ng-model="image"
    append-data-uri
    cover
    cover-height="300"
    cover-width="100"
    cover-x="center"
    cover-y="bottom"
    resize-quality="0.7">
</button>

<p>Original</p>
<img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/>
<p>Resized</p>
<img ng-show="image" ng-src="{{image.resized.dataURL}}"/>
```



### Optional Parameter: 

- resize-quality (default is 0.7)
- resize-type (default is 'image/jpg')
- resize-max-height (default is 300)
- resize-max-width (default is 250)
- cover
- cover-height (default is 300)
- cover-width (default is 250)
- cover-x (default is 'left')
- cover-y (default is 'top')
- append (appends to model list as opposed to overwriting it)


## How to run the Demo?

```Shell
git clone https://github.com/boxxxie/angularjs-imageupload-directive.git
cd angularjs-imageupload-directive
npm install

node demo/back-end/app.js
open http://localhost:8080
```

## Depends on

- angular-1.2.15

## Tested in following browsers:

Testimage: 4320x3240 4.22 MB, Resized (70% jpg): 320x270   

- Chrome 24 (Windows 8), Size: 9.3 KB
- Chrome Canary 27 (Windows 8), Size: 9.3 KB
- Firefox 18 (Windows 8), Size: 23.5 KB
- Internet Explorer 10 (Windows 8), Size: 9.06 KB

## Known Issues

- current demo may not work correctly. please submit PR if you can fix it (may need a build script)
- filesize can vary from Browser to Browser.


## TODO's

- better drag and drop support
- make a build file and break up the main source file into smaller pieces.