Angular 2 File Upload

Angular 2 file upload is a component  that allows us to upload files to the server. Angular 2 file upload can be integrated inside an HTML form in your Component Template.

angular 2 file upload
angular 2 file upload

 

Download our File Upload Component from here: (Compatible Angular 2 final release) ready to run example.

With a step by step on how to run the demo.

 

let’s build our Angular 2 file upload example .

ng file upload setup
ng file upload setup

 

1 – First step is the file-upload component installation after you download the file above and unzip the content:

npm install

2- you can view the file-upload component in app/com/fileupload folder contains a readme.md file for more options and two directives (ng2-file-select / ng2-file-drop):

  • ng2-file-select: can be used within a file-input of your HTML form.
  • ng2-file-drop: can be used to determine the area when the files can be dropped.
angular 2 file upload example
angular 2 file upload example

 

  1. HTML Example (angular-2-upload-file.html)


<div>


<h3>Angular 2 File Upload - Example (ng2FileDrop - ng2FileSelect) </h3>



<div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="well my-drop-zone">
Drop File Here
</div>



<div ng2FileDrop [ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}" (fileOver)="fileOverAnother($event)" [uploader]="uploader" class="well my-drop-zone">
Drop More Files Here
</div>


Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple  />

Single
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>


2. Typescript Example (angular-2-upload-file.ts)


import { Component } from '@angular/core';

@Component({
  selector: 'file-upload-demo-app',
  templateUrl: './fileupload-demo.component.html'
})
export class FileUploadDemoComponent  {
  uploadFile: any;
  hasBaseDropZoneOver: boolean = false;
  options: Object = {
    url: 'http://localhost/upload/'//the path to your upload folder
  };

  handleUpload(data): void {
    if (data && data.response) {
      data = JSON.parse(data.response);
      this.uploadFile = data;
    }
  }

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

Our component example uses typescript as programming language.

all files from here: angular 2 file upload