Integration of Dropzone In Angular 7 Application

In this article, we will explore the process of integration of the Dropzone library in an Angular application.

Dropzone is a lightweight and open source library for uploading images. We can drag and drop an image in Dropzone and then upload to the server using server-side technologies. It provides the drag and drop functionality to upload and preview images and also provides image upload progress bar. It supports large images and thumbnail previews of images. With Dropzone, we can upload multiple images in a single click.

Integration of DropZone In Angular 7 Application

Prerequisites

  • We should have a basic knowledge of Angular 
  • Visual Studio Code should be installed
  • Node and NPM installed
  • Angular CLI
  • Bootstrap 

First of all, let's check Node, NPM, and CLI versions in our system. To check the versions, open command prompt and type -

  • node -v
  • npm -v
  • ng version
You can see the result in the following image.
Integration of DropZone In Angular 7 Application
 
Step 1
 
Create an Angular 7 project with the name "Drop" by using the following command.
 
ng new Drop 
 
Integration of DropZone In Angular 7 Application
 
Step 2
 
Open Visual Studio Code, open the newly created project, and add Dropzone.js library to this project by using the following command.
 
npm install ngx-dropzone-wrapper --save
 
Integration of DropZone In Angular 7 Application
 
Step 3

Now, open the integrated terminal by pressing Ctrl + and ~ and add the following command to add Bootstrap in this project.

npm install --save Bootstrap
 
Integration of DropZone In Angular 7 Application
 
Now, open the styles.css file and add Bootstrap file reference to it. We can also add the Bootstrap file reference into our angular.json file.

To add the reference in styles.css file, add this line -

@import '~bootstrap/dist/css/bootstrap.min.css'; 

Step 4

Now, create a component. To create the component, open terminal and use the following command.

ng g c DropZone

Integration of DropZone In Angular 7 Application

Step 5

Now, open the app.module.ts file and export configuration module of the Dropzone library. Add the following code in this file.
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3.     
  4. import { AppRoutingModule } from './app-routing.module';    
  5. import { AppComponent } from './app.component';    
  6. import { DropZoneComponent } from './drop-zone/drop-zone.component';    
  7. import { DropzoneModule } from 'ngx-dropzone-wrapper';    
  8. import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';    
  9. import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';    
  10. const DROPZONECONFIG: DropzoneConfigInterface = {    
  11.     
  12.   url: 'localhost:52367/post',    
  13.   maxFilesize: 100,    
  14.   acceptedFiles: 'image/jpg,image/png,image/jpeg/*'    
  15.     
  16. };    
  17. @NgModule({    
  18.   declarations: [    
  19.     AppComponent,    
  20.     DropZoneComponent    
  21.   ],    
  22.   imports: [    
  23.     BrowserModule,    
  24.     AppRoutingModule, DropzoneModule    
  25.   ],    
  26.   providers: [    
  27.     {    
  28.       provide: DROPZONE_CONFIG,    
  29.       useValue: DROPZONECONFIG    
  30.     }    
  31.   ],    
  32.   bootstrap: [AppComponent]    
  33. })    
  34. export class AppModule { }    

Step 6

Open the dropzone.component.css file and add the following code.

  1. .header {    
  2.   text-align: center;    
  3.   background:blue;    
  4.   color: white;    
  5.   font-size: 20px;    
  6. }   

Step 7

Open the dropzone.component.html file and add the following code.

  1. <div class="header">    
  2.     <h3>Drag and Drop Image Here</h3>    
  3.   </div>    
  4.     
  5. <dropzone [config]="config" [message]="'Drag and Drop Images here'"></dropzone>  

Step 8

Now, run the project and upload image buy clicking or dragging-n-dropping on the box.
 
Integration of DropZone In Angular 7 Application

Summary

In this article, we learned about Dropzone library and the integration of Dropzone library into an Angular application. Dropzone library makes it easy to create the Drag-n-Drop functionality for uploading images with preview options and progress bar.