credit: http://www.uploadify.com/ We needed to drop file input feature in one of our app. implement drag Angular 2 We selected for this. ng-file-upload We tried to follow the . As suggested, implemented & like the following: help page [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) drag-upload-input.html  <input type="file" ng2FileSelect [uploader]="uploader" /> drag-upload-input.component.ts import { Component } from ' ';import { FileUploader } from 'ng2-file-upload'; @angular/core // const URL = '/api/';const URL = ' ; https://evening-anchorage-3159.herokuapp.com/api/' ({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; @Component public fileOverBase(e: any): void {this.hasBaseDropZoneOver = e;} public fileOverAnother(e: any): void {this.hasAnotherDropZoneOver = e;}} The has got like this: [app.module.ts](https://github.com/valor-software/ng2-file-upload/blob/development/demo/src/app/app.module.ts) FileUploadModule // File upload modulesimport { FileUploadModule } from 'ng2-file-upload';import { DragUploadInput } from './file-upload/drag-upload-input.component'; //other imports ({imports: [ ... other importsFileUploadModule],declarations: [  ... other declarationsDragUploadInput],bootstrap: [AppComponent]})export class AppModule { } @NgModule And the looks like this: [systemjs.config.js](http://stackoverflow.com/a/37167153/2404470) (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 .

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Angular 4 by examples

3 Ways to Pass Async Data to Angular + Child Components

How does Angular2 work? Part 1 — Application Refs

A first look into the Angular CDK

All You Need to Know About @Decorators— a Case Study

Angular 4 by examples

3 Ways to Pass Async Data to Angular + Child Components

How does Angular2 work? Part 1 — Application Refs

A first look into the Angular CDK

All You Need to Know About @Decorators— a Case Study

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps