ng2-uploader

For demos please see demos page.

Angular2 File Uploader

Installation

npm install ng2-uploader --save

Available parameters

Parameter	Example Value
url	http://api.ng2-uploader.com:10050
filterExtensions	true/false
allowedExtensions	['image/png', 'image/jpg'] or ['jpg', 'png']
calculateSpeed	true/false
data	{ userId: 12, isAdmin: true }
customHeaders	{ 'custom-header': 'value' }
fieldName	'user[avatar]'
fieldReset	true/false
authToken	012313asdadklj123123
authTokenPrefix	'Bearer' (default)

All parameters except url are optional.

Examples

1. Basic Example
2. Advanced Example

Backend Examples

1. NodeJS using HapiJS
2. NodeJS using express
3. PHP (Plain)

Basic Example

1// app.module.ts
2import { Ng2UploaderModule } from 'ng2-uploader';
3...
4@NgModule({
5  ...
6  imports: [
7    Ng2UploaderModule
8  ],
9  ...
10})
11// app.component.ts
12import { Component } from '@angular/core';
13
14@Component({
15  selector: 'demo-app',
16  templateUrl: 'app/demo.html'
17})
18export class DemoApp {
19  uploadFile: any;
20  hasBaseDropZoneOver: boolean = false;
21  options: Object = {
22    url: 'http://localhost:10050/upload'
23  };
24  sizeLimit = 2000000;
25
26  handleUpload(data): void {
27    if (data && data.response) {
28      data = JSON.parse(data.response);
29      this.uploadFile = data;
30    }
31  }
32
33  fileOverBase(e:any):void {
34    this.hasBaseDropZoneOver = e;
35  }
36
37  beforeUpload(uploadingFile): void {
38    if (uploadingFile.size > this.sizeLimit) {
39      uploadingFile.setAbort();
40      alert('File is too large');
41    }
42  }
43}

1<!-- app.component.html -->
2<input type="file"
3       ngFileSelect
4       [options]="options"
5       (onUpload)="handleUpload($event)"
6       (beforeUpload)="beforeUpload($event)">
7
8<!-- drag & drop file example-->
9<style>
10  .file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
11</style>
12<div ngFileDrop
13     [options]="options"
14     (onUpload)="handleUpload($event)"
15     [ngClass]="{'file-over': hasBaseDropZoneOver}"
16     (onFileOver)="fileOverBase($event)"
17     (beforeUpload)="beforeUpload($event)">
18</div>
19
20<div>
21Response: {{ uploadFile | json }}
22</div>

Advanced Example

This example show how to use available options and progress.

1import { Component, OnInit, NgZone } from '@angular/core';
2
3@Component({
4  selector: 'app-component',
5  templateUrl: 'app.component.html'
6})
7export class AppDemoComponent implements OnInit {
8  private zone: NgZone;
9  private options: Object;
10  private progress: number = 0;
11  private response: any = {};
12
13  ngOnInit() {
14    this.zone = new NgZone({ enableLongStackTrace: false });
15    this.options = {
16      url: 'http://api.ng2-uploader.com:10050/upload',
17      filterExtensions: true,
18      allowedExtensions: ['image/png', 'image/jpg'],
19      calculateSpeed: true,
20      data: {
21        userId: 12,
22        isAdmin: true
23      },
24      customHeaders: {
25        'custom-header': 'value'
26      },
27      authToken: 'asd123b123zxc08234cxcv',
28      authTokenPrefix: 'Bearer'
29    };
30  }
31
32  handleUpload(data: any): void {
33    this.zone.run(() => {
34      this.response = data;
35      this.progress = Math.floor(data.progress.percent / 100);
36    });
37  }
38}

Backend Example Using HapiJS

1'use strict';
2
3const Hapi        = require('hapi');
4const Inert       = require('inert');
5const Md5         = require('md5');
6const Multiparty  = require('multiparty');
7const fs          = require('fs');
8const path        = require('path');
9const server      = new Hapi.Server();
10
11server.connection({ port: 10050, routes: { cors: true } });
12server.register(Inert, (err) => {});
13
14const upload = {
15  payload: {
16    maxBytes: 209715200,
17    output: 'stream',
18    parse: false
19  },
20  handler: (request, reply) => {
21    const form = new Multiparty.Form();
22    form.parse(request.payload, (err, fields, files) => {
23      if (err) {
24        return reply({status: false, msg: err});
25      }
26
27      let responseData = [];
28
29      files.file.forEach((file) => {
30        let fileData = fs.readFileSync(file.path);
31        const originalName = file.originalFilename;
32        const generatedName = Md5(new Date().toString() +
33          originalName) + path.extname(originalName);
34        const filePath = path.resolve(__dirname, 'uploads',
35          generatedName);
36
37        fs.writeFileSync(filePath, fileData);
38        const data = {
39          originalName: originalName,
40          generatedName: generatedName
41        };
42
43        responseData.push(data);
44      });
45
46      reply({status: true, data: responseData});
47    });
48  }
49};
50
51const uploads = {
52  handler: {
53    directory: {
54      path: path.resolve(__dirname, 'uploads')
55    }
56  }
57};
58
59server.route([
60  { method: 'POST', path: '/upload',          config: upload  },
61  { method: 'GET',  path: '/uploads/{path*}', config: uploads }
62]);
63
64server.start(() => {
65  console.log('Upload server running at', server.info.uri);
66});

Backend example using express

1const express = require('express');
2const cors = require('cors');
3const multer = require('multer');
4const path = require('path');
5
6const app = express();
7app.use(cors());
8
9const upload = multer({
10  dest: 'uploads/',
11  storage: multer.diskStorage({
12    filename: (req, file, cb) => {
13      let ext = path.extname(file.originalname);
14      cb(null, `${Math.random().toString(36).substring(7)}${ext}`);
15    }
16  })
17});
18
19app.post('/upload', upload.any(), (req, res) => {
20  res.json(req.files.map(file => {
21    let ext = path.extname(file.originalname);
22    return {
23      originalName: file.originalname,
24      filename: file.filename
25    }
26  }));
27});
28
29app.listen(10050, () => {
30  console.log('ng2-uploader server running on port 10050.');
31});

Backend example using plain PHP

1<?php
2
3header("Access-Control-Allow-Origin: *");
4
5if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
6  echo json_encode(array('status' => false));
7  exit;
8}
9
10$path = 'uploads/';
11
12if (isset($_FILES['file'])) {
13  $originalName = $_FILES['file']['name'];
14  $ext = '.'.pathinfo($originalName, PATHINFO_EXTENSION);
15  $generatedName = md5($_FILES['file']['tmp_name']).$ext;
16  $filePath = $path.$generatedName;
17
18  if (!is_writable($path)) {
19    echo json_encode(array(
20      'status' => false,
21      'msg'    => 'Destination directory not writable.'
22    ));
23    exit;
24  }
25
26  if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {
27    echo json_encode(array(
28      'status'        => true,
29      'originalName'  => $originalName,
30      'generatedName' => $generatedName
31    ));
32  }
33}
34else {
35  echo json_encode(
36    array('status' => false, 'msg' => 'No file uploaded.')
37  );
38  exit;
39}
40
41?>

Demos

For more information, examples and usage examples please see demos

LICENCE

MIT