NgxDropFileImage

This library was generated with Angular CLI version 12.0.5.

Demo

Features

• You need to have Bootstrap 4 to 4.5 in your project
• Use images with the same size (recommended)

Installation

npm i ngx-drop-file-image --save

Usage

In your AppModule

...
import { NgxDropFileImageModule } from 'ngx-drop-file-image';
...
@NgModule({
  imports: [
    ...
    NgxDropFileImageModule
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

In your component html To Click or drag the images

<div style="width: 150px; height: 150px;">
    <drop-image-file (imgFiles)="getImages($event)"></drop-image-file>
</div>

In your component html If you want to display the images before saving them

<div class="container mt-4">
    <div class="row">
        <div *ngFor="let item of images" class="col-12 col-md-6 col-lg-4 mb-2">
            <show-image urlImage="{{item.urlImage}}"></show-image>
        </div>
    </div>
</div>

In your app component TS

import { Component } from '@angular/core';
import { IFileImage } from 'ngx-drop-file-image';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  images: IFileImage[] = [];

  constructor() {
  }

  ngOnInit(): void {
  }

  getImages(images: IFileImage[]) {
    this.images = images;
    console.log(this.images);
  }
}

Configuration

To label in English: lang="en"

 <drop-image-file (imgFiles)="getImages($event)" lang="en"></drop-image-file>

To remove the animation: [isAnimation]="false" To add a frame to the image: type="frame"

 <show-image urlImage="{{item.urlImage}}" [isAnimation]="false" type="frame"></show-image>

License

MIT

Free Software, Hell Yeah!