Drag&Drop file uploader UI in Angular 2+ app

Sometimes we need to allow users to upload files by just dragging and dropping them in some area. How could we do it in an Angular application?

Photo by Omid Kashmari on Unsplash

Let’s create a new Angular application with Angular Material and Flex-Layout by running the following commands:

npm install -g @angular/cli
ng new file-uploader --routing=true --style=scss
cd file-uploader
npm install @angular/flex-layout
ng add @angular/material
ng serve -o

The app will be available at localhost:4200.

We want our UI to have both a styled drag&drop area and a button to select the files the regular way. So let’s create the UI without any functionality:

ng g component file-uploader

We need to update app.module.ts file to import all needed modules:

// app.module.ts
imports: [
…
MatButtonModule,
MatIconModule,
FlexLayoutModule
]

Update file-uploader.component.html and file-uploader.component.scss:

The markup for the file uploader

Add file-uploader component to app.component.html by replacing the content with the following:

<app-file-uploader></app-file-uploader>

The drag&drop area

Right now nothing here works, so let’s add the functionality.

Add the following code to file-uploader.component.ts:

Drag&drop functionality

Update div.drop-area by binding methods to drag&drop events:

Drop area with binded drag&drop events

What does this code do?

Firstly, when files are entering or over the drop area we change the isDraggedOver variable to be true and set it to false when the files are outside of this area. When isDraggedOver is true the area is highlighted by adding a drop-area__active class to it.

Secondly, we prevented files to be downloaded or displayed in the browser when they are dropped on the page, by calling our stopDefault method in handleDrop and handleDragOver methods. When a drop event occurs, the file list is stored in event.dataTransfer.files. Note that this variable is a type of FileList and to convert it to a type of File[] we use the Array.from static method.

Now let’s add functionality to our button. Add method to FileUploader component:

Update input element by adding to it the following:

And add to the button a click event:

Now the button click will trigger the input element click. When files are selected, we update files property with selected files.

We could add event emitter for our component to notify parent component that files were selected, by adding this code to the FileUploader component:

@Output() filesLoaded = new EventEmitter<File[]>();

and adding this snippet to handleDrop and onFileChange methods:

this.filesLoaded.emit(this.files);

Summary

We have created a drag&drop area with a button to allow users to select files using drag and drop functionality in addition to regular file selection.

All files are available at the GitHub repository, including a component to display images from loaded files.

orlyohreally/file-uploader

Link to the demo: https://stackblitz.com/github/orlyohreally/file-uploader.