# ng2-imageupload

> A component which resizes the selected input file image

Latest version **1.4.2** (published 2017-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-imageupload
pnpm add ng2-imageupload
yarn add ng2-imageupload
bun add ng2-imageupload
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2017-03-29 |
| First published | 2016-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ribizli@gmail.com |
| Maintainers | ribizli |

## Links

- npm: https://www.npmjs.com/package/ng2-imageupload
- Repository: https://github.com/ribizli/ng2-imageupload
- Homepage: https://github.com/ribizli/ng2-imageupload#readme
- Issues: https://github.com/ribizli/ng2-imageupload/issues
- npm.io page: https://npm.io/package/ng2-imageupload

## Recent versions

- 1.4.2 (latest) — 2017-03-29
- 1.4.1 — 2017-03-27
- 1.4.0 — 2017-03-25
- 1.3.1 — 2017-02-01
- 1.3.0 — 2017-01-08
- 1.2.2 — 2016-11-14
- 1.2.1 — 2016-10-01
- 1.2.0 — 2016-08-29
- 1.1.1 — 2016-05-09
- 1.1.0 — 2016-05-09
- 1.0.1 — 2016-03-15
- 1.0.0 — 2016-03-14

## README

# ng2-imageupload
A component which resizes the selected input file image

# Install

```
npm install ng2-imageupload
```

Load it via SystemJs:

```
    System.config({
        packages: {        
          'ng2-imageupload': {
              main: 'index.js',
              defaultExtension: 'js'
          }
        },
        map: {
            'ng2-imageupload': 'node_modules/ng2-imageupload'
        }
      });
```

# Usage

```typescript
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ImageUploadModule } from 'ng2-imageupload';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [ BrowserModule, ImageUploadModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

```typescript
import { Component } from '@angular/core';
import { ImageResult, ResizeOptions } from 'ng2-imageupload';

@Component({
    selector: 'my-app',
    template: `
      <img [src]="src" [hidden]="!src"><br>
      <input type="file" imageUpload
        (imageSelected)="selected($event)"
        [resizeOptions]="resizeOptions">`
})
export class AppComponent {
    src: string = "";
    resizeOptions: ResizeOptions = {
        resizeMaxHeight: 128,
        resizeMaxWidth: 128
    };

    selected(imageResult: ImageResult) {
        this.src = imageResult.resized
            && imageResult.resized.dataURL
            || imageResult.dataURL;
    }
}
```
# API
## selector: `input[type=file][imageUpload]`

## event: `(imageSelected)`
event fired (async) when the file input changes and the image's `dataURL` is calculated and the image is resized.

```typescript
interface ImageResult {
    file: File;
    url: string;
    error?: string;
    dataURL?: string;
    resized?: {
        dataURL: string;
        type: string;
    }
}
```

If any error happens, the `error` field is set with an error message.
(e.g. `'Extension Not Allowed'` or `'Image processing error'`)

## property: `[resizeOptions]`

 - `resizeMaxHeight`
 - `resizeMaxWidth`
 - `resizeQuality`: default: `0.7`
 - `resizeType`: default: `image/jpeg` 

Resize algorithm ensures, that the resized image can fit into the specified `resizeMaxHeight x resizeMaxWidth` size.

## property: `[allowedExtensions]`
Array of allowed extensions (e.g. `['jpg', 'jpeg', 'png']`; case insensitive). If specified and an input file has different extension the
`imageSelected` event is fired with the error field set to 'Extension Not Allowed'. `dataUrl` and `resize` not calculated
at all.

---
_Source: https://npm.io/package/ng2-imageupload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._