ngx-simple-image-upload

    1.0.1 • Public • Published

    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.

    angular logo

    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

    Install

    npm i ngx-simple-image-upload

    DownloadsWeekly Downloads

    14

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • elporfirio