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:


$ 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';

  declarations: [
  imports: [

    // Specify the library as an import
  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"
      errorText="The image is too small"
      defaultText="Please, select or drop an image"
      inputPlaceholder="Select an image"

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() {
    .then(data => data.json())
    .then(data => data.results)
    .then(data => this.myServerImageList = => {
      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);


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 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.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

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