ngx-simple-image-upload

An Angular Component for upload images and read them inline.

This version work with Angular 2+ versions, if you are looking for Angular 1.x and jQuery please visit simpleImageUpload repository.

Requirements:

• jQuery 1.11+
• Angular 2+ (currently tested on Angular 5)

Browser Support:

Desktop

| IE | Chrome | Firefox | Safari | | :----: | :------: | :------:| :----: | | 11 | 63+ | 57+ | 11 |

Mobile

| iOS Safari | Chrome | UC Android | | :----: | :------: | :------: | | 10.2 | 62 | 11.4 |

Installation

Install via npm

npm i ngx-simple-image-upload

or download via GitHub

Usage

Feel free to change styles located in simple-image-upload.component.css according to your project.

Add jQuery to angular-cli.json (if you install via npm)

...

  "scripts": [
    "../node_modules/jquery/dist/jquery.js"
  ],

...

Import SimpleImageUploadModule into your module.

import { SimpleImageUploadModule } from 'ngx-simple-image-upload';

Add Module to your inputs:

  declarations: [
    ...
  ],
  imports: [
    ...
    SimpleImageUploadModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],

Then use the componente as follow:

<simple-image-upload (onFileReaded)="doSome($event)"></simple-image-upload>

Callbacks

| Name | Return Type | Description | | ----------- | ----------- | ----------- | | onFileReaded | imageFile | Returns imageFile object after process image |

imageFile Type

{
    "source": "data:image;base64",
    "file": {File Object},
    "name": "imageName.jpg"
}

Fix Issue with Angular4/5

For error node_modules/ngx-simple-image-upload/index.ts is missing from the TypeScript compilation.

Add the "include" node into tsconfig.app.json (where app is your main module)

  "include": [
    "../src/**/*",
    "../node_modules/ngx-simple-image-upload/index.ts"
    ...
  ],

Example

Declare method in your main module, this method will receive the imageFile.

  setImage(imageFile){
    this.image = imageFile.source;
  }

Use source like src attribute:

<img src="{{ this.image }}>

And add the method to callback:

<simple-image-upload (onFileReaded)="setImage($event)"></simple-image-upload>

Demo

See demo on https://elporfirio.github.io/simpleImageUpload/.

Change Log

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

1.0.0 - 2018-01-15

Initial Release

• Nothing Special to report