ng2-simple-upload v0.1.0

ng2-simple-upload

A simple upload module for Angular2

Setup

Download npm package and save it in your package.json file

npm install ng2-simple-upload --save

Import the module into your app module or any module

...
import { SimpleUploadModule } from 'ng2-simple-upload';

@NgModule({
  ...
  imports: [
    ...
    SimpleUploadModule
  ],
  ...
})
export class AppModule { }

Add the directive to your HTML

<ng2-simple-upload></ng2-simple-upload>

Add the following properties and event

<ng2-simple-upload 
  [endpoint]="url" 
  [options]="options" 
  (callback)="callback($event)"
></ng2-simple-upload>

Component properties

url: string; // your web api

options: Object = {
  name: '1' // this has to be unique if multiple directives are used
};

// this returns the response from the web api
callback(response) {
  // log the response object
  console.log('ng2-simple-upload response', response);

  switch (response.status) {
    // use notifications, etc.
    case 200:
      ...
      break;
    case 404:
      ...
      break;
    case 500:
      ...
      break;
  }
}

Example Web API

// UploadController.cs
public IHttpActionResult Post()
{
    var files = HttpContext.Current.Request.Files;

   for (int i = 0; i < files.Count; i++)
   {
       var file = files[i];
       // Your logic here
   }

    return Ok(String.Format("Successfully uploaded {0} files.", files.Count));
}