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.