Implementing ng-file-upload in Angular 2/4/5 app

credit: http://www.uploadify.com/

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](https://github.com/valor-software/ng2-file-upload/blob/development/demo/src/app/components/file-upload/simple-demo.html) & [drag-upload-input.component.ts](https://github.com/valor-software/ng2-file-upload/blob/development/demo/src/app/components/file-upload/simple-demo.ts) like the following:

drag-upload-input.html

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

drag-upload-input.component.ts

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

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

@Component({moduleId: module.id,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](https://github.com/valor-software/ng2-file-upload/blob/development/demo/src/app/app.module.ts) has got FileUploadModule like this:

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

//other imports

@NgModule({imports: [ ... other importsFileUploadModule],declarations: [ ... other declarationsDragUploadInput],bootstrap: [AppComponent]})export class AppModule { }

And the [systemjs.config.js](http://stackoverflow.com/a/37167153/2404470) looks like this:

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

Originally published at xameeramir.github.io.