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' }
authToken	012313asdadklj123123
authTokenPrefix	'Bearer' (default)

All parameters except url are optional.

Examples

Backend Examples

Basic Example

// app.module.ts
import { UPLOAD_DIRECTIVES } from 'ng2-uploader';
...
@NgModule({
  ...
  declarations: [
    UPLOAD_DIRECTIVES
  ],
  ...
})
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  templateUrl: 'app/demo.html'
})
export class DemoApp {
  uploadFile: any;
  options: Object = {
    url: 'http://localhost:10050/upload'
  };

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

<!-- app.component.html -->
<input type="file" 
       ngFileSelect
       [options]="options"
       (onUpload)="handleUpload($event)">

<div>
Response: {{ uploadFile | json }}
</div>

Advanced Example

This example show how to use available options and progress.

import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: 'app.component.html'
})
export class AppDemoComponent implements OnInit {
  private zone: NgZone;
  private options: Object;
  private progress: number = 0;
  private response: any = {};

  ngOnInit() {
    this.zone = new NgZone({ enableLongStackTrace: false });
    this.options = {
      url: 'http://api.ng2-uploader.com:10050/upload',
      filterExtensions: true,
      allowedExtensions: ['image/png', 'image/jpg'],
      calculateSpeed: true,
      data: {
        userId: 12,
        isAdmin: true
      },
      customHeaders: {
        'custom-header': 'value'
      },
      authToken: 'asd123b123zxc08234cxcv',
      authTokenPrefix: 'Bearer'
    };
  }

  handleUpload(data: any): void {
    this.zone.run(() => {
      this.response = data;
      this.progress = Math.floor(data.progress.percent / 100);
    });
  }
}

Backend Example Using HapiJS

'use strict';

const Hapi        = require('hapi');
const Inert       = require('inert');
const Md5         = require('md5');
const Multiparty  = require('multiparty');
const fs          = require('fs');
const path        = require('path');
const server      = new Hapi.Server();

server.connection({ port: 10050, routes: { cors: true } });
server.register(Inert, (err) => {});

const upload = {
  payload: {
    maxBytes: 209715200,
    output: 'stream',
    parse: false
  },
  handler: (request, reply) => {
    const form = new Multiparty.Form();
    form.parse(request.payload, (err, fields, files) => {
      if (err) {
        return reply({status: false, msg: err});
      }

      let responseData = [];

      files.file.forEach((file) => {
        let fileData = fs.readFileSync(file.path);
        const originalName = file.originalFilename;
        const generatedName = Md5(new Date().toString() + 
          originalName) + path.extname(originalName);
        const filePath = path.resolve(__dirname, 'uploads', 
          generatedName);

        fs.writeFileSync(filePath, fileData);
        const data = {
          originalName: originalName,
          generatedName: generatedName
        };

        responseData.push(data);
      });

      reply({status: true, data: responseData});
    });
  }
};

const uploads = {
  handler: {
    directory: {
      path: path.resolve(__dirname, 'uploads')
    }
  }
};

server.route([
  { method: 'POST', path: '/upload',          config: upload  },
  { method: 'GET',  path: '/uploads/{path*}', config: uploads }
]);

server.start(() => {
  console.log('Upload server running at', server.info.uri);
});

Backend example using express

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');

const app = express();
app.use(cors());

const upload = multer({ 
  dest: 'uploads/',
  storage: multer.diskStorage({
    filename: (req, file, cb) => {
      let ext = path.extname(file.originalname);
      cb(null, `${Math.random().toString(36).substring(7)}${ext}`);
    }
  }) 
});

app.post('/upload', upload.any(), (req, res) => {
  res.json(req.files.map(file => {
    let ext = path.extname(file.originalname);
    return {
      originalName: file.originalname,
      filename: file.filename
    }
  }));
});

app.listen(10050, () => {
  console.log('ng2-uploader server running on port 10050.');
});

Backend example using plain PHP

<?php 

header("Access-Control-Allow-Origin: *");

if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
  echo json_encode(array('status' => false));
  exit;
}

$path = 'uploads/';

if (isset($_FILES['file'])) {
  $originalName = $_FILES['file']['name'];
  $ext = '.'.pathinfo($originalName, PATHINFO_EXTENSION);
  $generatedName = md5($_FILES['file']['tmp_name']).$ext;
  $filePath = $path.$generatedName;
  
  if (!is_writable($path)) {
    echo json_encode(array(
      'status' => false,
      'msg'    => 'Destination directory not writable.'
    ));
    exit;
  }

  if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {
    echo json_encode(array(
      'status'        => true,
      'originalName'  => $originalName,
      'generatedName' => $generatedName
    ));
  }
}
else {
  echo json_encode(
    array('status' => false, 'msg' => 'No file uploaded.')
  );
  exit;
}

?>

Demos

For more information, examples and usage examples please see demos

LICENCE

MIT

kiuka / ng2-uploader