Integration of Dropzone In Angular 7 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.

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.

Step 1

Create an Angular 7 project with the name "Drop" by using the following command.

ng new Drop

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

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

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

Step 5

Now, open the app.module.ts file and export configuration module of the Dropzone library. Add the following code in this file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DropZoneComponent } from './drop-zone/drop-zone.component';
import { DropzoneModule } from 'ngx-dropzone-wrapper';
import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
const DROPZONECONFIG: DropzoneConfigInterface = {
url: 'localhost:52367/post',
maxFilesize: 100,
acceptedFiles: 'image/jpg,image/png,image/jpeg/*'
};
@NgModule({
declarations: [
AppComponent,
DropZoneComponent
],
imports: [
BrowserModule,
AppRoutingModule, DropzoneModule
],
providers: [
{
provide: DROPZONE_CONFIG,
useValue: DROPZONECONFIG
}
],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 6

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

.header {
text-align: center;
background:blue;
color: white;
font-size: 20px;
}

Step 7

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

<div class="header">
<h3>Drag and Drop Image Here</h3>
</div>
<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.

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.