Implementing ng-file-upload in Angular 2 app

Upload file


We needed to implement drag drop file input feature in one of our Angular 2 app.

We selected ng-file-upload for this.

We tried to follow the help page. As suggested, implemented drag-upload-input.html & drag-upload-input.component.ts like the following:


<!-- we only need single file upload -->
<input type="file" ng2FileSelect [uploader]="uploader" />


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

// const URL = '/api/';
const URL = '';

  selector: 'drag-upload-input',
  templateUrl: './drag-upload-input.html'
export class DragUploadInput {
  public uploader: FileUploader = new FileUploader({ url: URL });
  public hasBaseDropZoneOver: boolean = false;
  public hasAnotherDropZoneOver: boolean = false;

  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;

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

The app.module.ts has got FileUploadModule like this:

// File upload modules
import { FileUploadModule } from 'ng2-file-upload';
import { DragUploadInput } from './file-upload/drag-upload-input.component';

//other imports

  imports: [ ... other imports
  declarations: [  ... other declarations
  bootstrap: [AppComponent]
export class AppModule { }

And the systemjs.config.js looks like this:

(function (global) {
    // map tells the System loader where to look for things
    map: {
      // other libraries
      'ng2-file-upload': 'node_modules/ng2-file-upload',
    packages: {
	  // other packages
      ng2-file-upload': {
        main: 'ng2-file-upload.js',
        defaultExtension: 'js'

Nordible is a digital solutions provider helping organizations achieve their digital goals.

We develop and measure digital solutions, implement impactful brand promotion and SEO strategies and develop software driven by rigorous testing that help your business succeed online and beyond.

You can contact us at for business inquiries.

Follow us: