Install ng2-file-upload using npm

ng2-file-upload

npm install ng2-file-upload --save

No Dependencies for this module.

Add FileUploadModule into your UIComponentsModule class. ui-components.module.ts would look like this

import {NgModule} from '@angular/core';
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
import { UploadComponent } from './extra/upload/upload.component';

@NgModule({
imports: [FileUploadModule],
declarations: [UploadComponent]
})
export class UIComponentsModule { }
                

upload.component.html would look like this

<section id="file-upload">
<div class="card">
    <div class="card-header">
    <h4>Angular2 File Upload</h4>
    </div>
    <div class="card-block">
    <div class="row">
        <div class="col-md-12 col-lg-6">
        <div ng2FileDrop
            [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
            (fileOver)="fileOverBase($event)"
            [uploader]="uploader"
            class="py-5 mb-3 text-center font-medium-5 text-uppercase grey my-drop-zone">
            Base dropzone
        </div>
        </div>
        <div class="col-md-12 col-lg-6">
        <div ng2FileDrop
            [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
            (fileOver)="fileOverAnother($event)"
            [uploader]="uploader"
            class="py-5 mb-3 text-center font-medium-5 text-uppercase grey my-drop-zone">
            Another dropzone
        </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
        <h4>Select files</h4>
        <div>Multiple</div>
        <label class="custom-file mb-3">
            <input type="file" ng2FileSelect [uploader]="uploader" multiple class="custom-file-input">
            <span class="custom-file-control"></span>
        </label>

        <div>Single</div>
        <label class="custom-file">
            <input type="file" ng2FileSelect [uploader]="uploader" class="custom-file-input">
            <span class="custom-file-control"></span>
        </label>
        </div>

        <div class="col-md-9">
        <h4>Upload queue</h4>
        <p>Queue length: {{ uploader?.queue?.length }}</p>

        <table class="table">
            <thead>
            <tr>
                <th width="50%">Name</th>
                <th>Size</th>
                <th>Progress</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of uploader.queue">
            <td><strong>{{ item?.file?.name }}</strong></td>
            <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
            <td *ngIf="uploader.isHTML5">
                <div class="progress" style="margin-bottom: 0;">
                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                </div>
            </td>
            <td class="text-center">
                <span *ngIf="item.isSuccess"><i class="fa fa-ok"></i></span>
                <span *ngIf="item.isCancel"><i class="fa fa-ban"></i></span>
                <span *ngIf="item.isError"><i class="fa fa-remove"></i></span>
            </td>
            <td nowrap>
                <button type="button" class="btn btn-success btn-sm"
                (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                <span class="fa fa-upload"></span> Upload
                </button>
                <button type="button" class="btn btn-warning btn-sm"
                (click)="item.cancel()" [disabled]="!item.isUploading">
                <span class="fa fa-ban"></span> Cancel
                </button>
                <button type="button" class="btn btn-danger btn-sm"
                (click)="item.remove()">
                <span class="fa fa-trash"></span> Remove
                </button>
            </td>
            </tr>
            </tbody>
        </table>

        <div>
            <p>Queue progress: <ngb-progressbar type="primary" [value]="uploader.progress"></ngb-progressbar></p>
            <button type="button" class="btn btn-success"
            (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
            <span class="fa fa-upload"></span> Upload all
            </button>
            <button type="button" class="btn btn-warning"
            (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
            <span class="fa fa-ban"></span> Cancel all
            </button>
            <button type="button" class="btn btn-danger"
            (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
            <span class="fa fa-trash"></span> Remove all
            </button>
        </div>
        </div>
    </div>
    </div>
</div>
</section>
                        

.my-drop-zone {
    border: dotted 3px lightgray;
    background-color: #f5f7fa !important;
}
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }
                    

Import ng2-file-upload in UploadComponent class. upload.component.ts would look like this

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';

const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';

@Component({
    selector: 'app-upload',
    templateUrl: './upload.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    styleUrls: ['./upload.component.scss']
})
export class UploadComponent {

    uploader: FileUploader = new FileUploader({
    url: URL,
    isHTML5: true
    });
    hasBaseDropZoneOver = false;
    hasAnotherDropZoneOver = false;

    // Angular2 File Upload
    fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
    }

    fileOverAnother(e: any): void {
    this.hasAnotherDropZoneOver = e;
    }
}