ngx-drop-file-image/README.md

You need to have Bootstrap 4 to 4.5 in your project

# NgxDropFileImage

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.

## Demo

[![Watch the video](https://firebasestorage.googleapis.com/v0/b/zichu-10.appspot.com/o/npm%2Fimg-gallery%2Fvideo-view.png?alt=media&token=3a672133-51bf-4761-9c66-70c2f963aec8)](https://firebasestorage.googleapis.com/v0/b/zichu-10.appspot.com/o/npm%2Fngx-drop-image%2Fdemo-video.mp4?alt=media&token=3a07945f-6fae-400e-b888-b77e0cf8149d)

![alt text](https://firebasestorage.googleapis.com/v0/b/zichu-10.appspot.com/o/npm%2Fngx-drop-image%2Fdemo-image.png?alt=media&token=9cf6d729-90d8-48bd-85ee-5db881320068)

## Features

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

## Installation
```sh
npm i ngx-drop-file-image --save
```

# Usage
### _In your AppModule_

```typescript
...
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_

```html
<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_
```html
<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
```typescript
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"
```html
 <drop-image-file (imgFiles)="getImages($event)" lang="en"></drop-image-file>
```

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

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

MIT

**Free Software, Hell Yeah!**