How to create a Drag and Drop file uploading in Angular

5 min readNov 6, 2019

Introduction

Hi everyone, in this article, we will build a Drag and drop directive with angular from an angular-cli scratch project.

First of all, we need to install angular-cli on our computer, for this, we need to install node.js, the latest version is 12.13.0, and that’s the one I’ll be using for this tutorial.

Once we had installed node on our computer downloading the distribution for our OS, we will be able to use npm, the node package manager solution, and we will be able to install angular-cli with this simple command (may require sudo):

npm install angular-cli -g

Once installed, we will be able to create our new project with angular cli, with the command

ng new dnd

This will generate our initial structure, configuration and download all node modules required for running angular 8 (in my case Angular 8).

Once we have done this, we will start our server with angular-cli by executing on project’s root path the next command :

ng serve

Once the code has been transpired and all been set, we can go to our browser to localhost:4200 and we will see something like this.

For simplicity reason, we will start creating drag and drop zone in the app component.

In app.component.html file we will create the next HTML structure that will define our drop zone:

And also we are going to set some styling to this structure, by adding this to the file app.component.css :

With these two steps we will get something like this:

Result after adding the basic structure with some style

Directives and how to use them:

After we go on, we should talk a little bit about directives, there are 3 different kinds of directives on angular 8. The most used (and we have already used one of them) are components. This kind of directives defines the behavior of each part of our application. The second ones are structural directives, these ones make changes on the dom of the application against some conditions or expressions declared on them. (Like ngFor or ngIf directives). The third ones are attributes directives, these ones make changes on the element they are attached, like changes on styling, classes, attributes, etc. (Like ngClass or style directives).

To create a directive, we must be placed on folder we are going to create it and use the next angular-cli command :

ng generate directive dnd

By doing this angular-cli will create 2 files on our actual directory :

dnd.directive.ts (main file with the behavior of our directive)
dnd.directive.specs.ts (karma test file for unit testing) In dnd.directive.ts file we will find a decorator like in components file but slightly different from it, it is a directive decorator and it attaches metadata to our new class to allow it to behave like a simple directive.

As we can see, the selector now (it’s like a CSS standard selector) is an attribute selector, so to use this directive we are going to declare a new attribute on the host tag, in our case the div with class dropzone.

The next step is to add HostListener to detect Drag Over, Drag Leave and Dropping the file at last.

Then we need to notify the user that you are stepping onto dropzone,
we will add a small shake animation to get the user's attention.

to do this we should bind also properties from the host to the directive, we can do this by using @HostBinding decorator and decorate a property on the directive class.

Remember to import HostBinding from @angular/core

Adding file over class style:

Then we need to fire the shake class in DragOver in @HostListener to get the shaky zone.

Now you can emit your dropped files so you can use it outside the directive:

Bouns: Uploading simulator example.

In most scenarios, you want to upload your dropped files on browsed files which we supported too.

Starting with the last thing we did with our directive was to add the filedropped emitter in our view, let’s give him a reference in our ts file.

listing our dropped files in the view:

You will get something like the image below, a list with the name and size of the file with a progress bar and the ability to delete an item from the list.