- Ravi Raghav
Drag & Drop Images from your computer to Angular 8 Web Application
In today’s article, we will see how to drag and drop images from your computer to an Angular 8 web application using our custom directive.
Why do we need this?
In today’s world, almost all of the web applications have to deal with images on some level. Usually, the application provides a way to upload images but for better user experience, selecting multiple images at once and performing a drag and drop operation to your web application is a very common feature these days.
Let’s get started.
Open cmd at the location where you want to create your angular project and enter the following command
ng new ImageDragDrop

Once the creation of the project is done, open it up with your favorite editor (VS Code in my case)
Now we will create our new component in which we will implement drag and drop feature
For that run this command in the terminal
ng g c image-upload

After the execution of this command, you will see a folder generated with image-upload name

Now we will go to app.component.html, delete everything on that file and just add the selector of your newly generated component
<app-image-upload></app-image-upload>

Now let’s run our project. In the root folder of our project let’s run the command
ng serve
When it runs completely, go to our browser and open the following url

Now let us create a directive. We will run this following command in the terminal
ng g d ImageDrag
After the execution of the following command, you will see these two files

Now we will add an interface that will look something like this

Now we will modify our ImageDrag directive according to our functionality
With the help of @HostListner, we will add three events to our directive
dragover
dragleave
drop
We will also have an output property that will emit the array of dropped files
Our directive will look something like this
import {
Directive,
HostListener,
EventEmitter,
Output,
HostBinding,
} from '@angular/core';
import { FileHandle } from './file-handle';
import { DomSanitizer } from '@angular/platform-browser';
@Directive({
selector: '[appImageDrag]',
})
export class ImageDragDirective {
@Output('files') files: EventEmitter<FileHandle[]> = new EventEmitter();
@HostBinding('style.background') public background = '#eee';
constructor(private sanitizer: DomSanitizer) {}
@HostListener('dragover', ['$event']) public onDragOver(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#999';
}
@HostListener('dragleave', ['$event']) public onDragLeave(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#eee';
}
@HostListener('drop', ['$event']) public onDrop(evt: DragEvent) {
evt.preventDefault();
evt.stopPropagation();
this.background = '#eee';
let files: FileHandle[] = [];
for (let i = 0; i < evt.dataTransfer.files.length; i++) {
const file = evt.dataTransfer.files[i];
const url = this.sanitizer.bypassSecurityTrustUrl(
window.URL.createObjectURL(file)
);
files.push({ file, url });
}
if (files.length > 0) {
this.files.emit(files);
}
}
}
Here in drop event, we are just getting the files from DragEvent and in order to show their preview we are using DomSantizer to obtain their URL to show in img tags.
Now in order to use this, we will go back to our ImageUpload component, open its HTML file and this piece of code there
<div
style="width: 500px; height: 250px; text-align: center;"
appImageDrag
(files)="filesDropped($event)"
>
<span style="font-size: 25px;">Drop your files here</span>
</div>
<div style="margin-top: 20px; width: 500px; height: 400px;">
<div *ngFor="let file of uploadedFiles">
<img [src]="file.url" style="width: 100px; height: 100px;" />
</div>
</div>
Now we will go to it’s component file and modify it accordingly
import { Component, OnInit } from '@angular/core';
import { FileHandle } from '../file-handle';
@Component({
selector: 'app-image-upload',
templateUrl: './image-upload.component.html',
styleUrls: ['./image-upload.component.css'],
})
export class ImageUploadComponent implements OnInit {
uploadedFiles: FileHandle[];
constructor() {}
ngOnInit(): void {}
filesDropped(files: FileHandle[]) {
this.uploadedFiles = files;
}
}
Now let’s run our application
Summary
In today’s article, we have seen how we can drag and drop images from our local computer to our angular 8 web application using our own custom directive.
If you wish to see the code please click here!