Implementing ng-file-upload in Angular 2 app
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:
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
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
@NgModule({
imports: [ ... other imports
FileUploadModule
],
declarations: [ ... other declarations
DragUploadInput],
bootstrap: [AppComponent]
})
export class AppModule { }
And the systemjs.config.js
looks like this:
(function (global) {
System.config({
// 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'
}
}
});
})(this);