ng-drop-image is an angular component to help you manipulate single or multiple images. Images can be entered by the user using the traditional select or drop function.

drag and drop image in angular angular drag and drop between components, drag and drop folder angular, drop event in angular

How to make use of it:

Installation:

$ npm install @pluritech/ng-drop-image --save

1. Using ng-drop-image.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// Import the library
import { DropImageModule } from '@pluritech/ng-drop-image';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify the library as an import
    DropImageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Once the library is imported, you can use the image drop component in your Angular app:

<div class="container">
  <div class="row">
    <pluri-drop-image btnSelect="Select"
      [localList]="myUpdatedImageList"
      [serverList]="myServerImageList"
      [singleImage]="false"
      [hasError]="true"
      errorText="The image is too small"
      defaultText="Please, select or drop an image"
      inputPlaceholder="Select an image"
      (onImageChange)="whenChange($event)"
      minHeigth=1000
      minHeigth=1000
      (onError)="whenError($event)"
      (onUpdateList)="whenUpdateLocalList($event)"
      (onLocalImageSetAsMain)="whenLocalImageSetAsMain($event)"
      (onLocalImageDelete)="whenLocalImageDelete($event)"
      (onServerImageSetAsMain)="whenServerImageSetAsMain($event)"
      (onServerImageDelete)="whenServerImageDelete($event)">
    </pluri-drop-image>
  </div>
</div>

3. And on the printing side, we have the following:

export class AppComponent implements OnInit {
  title = 'ng-drop-image';

  public myUpdatedImageList: Base64Image[] = [];
  public myServerImageList: any[] = [];
  ngOnInit() {
    fetch('https://randomuser.me/api/?results=4')
    .then(data => data.json())
    .then(data => data.results)
    .then(data => this.myServerImageList = data.map(person => {
      return {main: false, path: person.picture.large}
    }));
  }

  whenChange(image: Base64Image): void {
    console.log('image changed', image);
  }

  whenError(error: ErrorPicture): void {
    console.log('error picture', error);
  }

  whenUpdateLocalList(list: Base64Image[]): void {
    console.log('list updated', list);
  }

  whenLocalImageSetAsMain(image: Base64Image): void {
    console.log('image to set as main', image);
    image.main = true;
  }

  whenLocalImageDelete(image: Base64Image): void {
    console.log('image to delete', image);
    const index = this.myUpdatedImageList.indexOf(image);
    this.myUpdatedImageList.splice(index, 1);
  }

  whenServerImageSetAsMain(image: any): void {
    console.log('image to set as main in server', image);
    image.main = true;
  }

  whenServerImageDelete(image: any): void {
    console.log('image to delete in server', image);
    const index = this.myServerImageList.indexOf(image);
    this.myServerImageList.splice(index, 1);
  }

Parameters

angular component to handle image drop, ng-drop-image Pluin/Github, angular drag and drop file upload with preview, angular upload image and display

See Demo And Download

Official Website(Pluritech): Click Here

This superior jQuery/javascript plugin is developed by Pluritech. For extra advanced usage, please go to the official website.