Press "Enter" to skip to content

An Angular Component To Handle Image Drop | ng-drop-image

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

ParameterDescription
btnSelectThe text of the ‘select image’ button
hasErrorA boolean expression to show the error text
errorTextThe error text
defaultTextThe default text is something like… ‘Please, drop an image
inputPlaceholderThe text to be shown in the blocked input
singleImageA boolean to indicate if you want to work with a single image or multiple. Default is true
imagePathThe path of an image to show in the template can be a base64 or an image URL, only if you’re using a single image
minWidthMin width in pixels of any image inserted, default is null, so, every image will be accepted.
minHeigthMin height of any image inserted, the default is null, so, every image will be accepted
onErrorA function to call when has an error with the image
onImageChangeA function to call when the image has changed, only if you’re using a single image
localListThe local list of images needs to be of type Base64Image
onLocalImageSetAsMainA function to call when a local image is set as the main
onLocalImageDeleteA function to call when a local image is deleted
onUpdateListA function to call every time the list is updated emits the entire list
serverListThe server list of images, type any, but, it needs to have the property path and the property main
onServerImageSetAsMainA function to call when a server image is set as main
onServerImageDeleteA function to call when a server image is deleted

angular-upload-image-and-display

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *