ng2-uploader

Angular2 File Uploader

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ng2-uploader
7581522.0.07 years ago8 years agoMinified + gzip package size for ng2-uploader in KB

Popular Searches

Readme

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 | 'useravatar' | 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

````ts // app.module.ts import { Ng2UploaderModule } from 'ng2-uploader'; ... @NgModule({ ... imports: 
Ng2UploaderModule
, ... }) // app.component.ts import { Component } from '@angular/core';
@Component({ selector: 'demo-app', templateUrl: 'app/demo.html' }) export class DemoApp { uploadFile: any; hasBaseDropZoneOver: boolean = false; options: Object = {
url: 'http://localhost:10050/upload'
}; sizeLimit = 2000000;
handleUpload(data): void {
if (data && data.response) {
  data = JSON.parse(data.response);
  this.uploadFile = data;
}
}
fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
beforeUpload(uploadingFile): void {
if (uploadingFile.size > this.sizeLimit) {
  uploadingFile.setAbort();
  alert('File is too large');
}
} } ````
````html ngFileSelect [options]="options" (onUpload)="handleUpload($event)" (beforeUpload)="beforeUpload($event)">
[options]="options" (onUpload)="handleUpload($event)" [ngClass]="{'file-over': hasBaseDropZoneOver}" (onFileOver)="fileOverBase($event)" (beforeUpload)="beforeUpload($event)">

Response: {{ uploadFile | json }}
````

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

````javascript '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

````js 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'REQUESTMETHOD' !== 'POST') { echo jsonencode(array('status' => false)); exit; }
$path = 'uploads/';
if (isset($FILES'file')) { $originalName = $FILES'file''name'; $ext = '.'.pathinfo($originalName, PATHINFOEXTENSION); $generatedName = md5($FILES'file''tmpname').$ext; $filePath = $path.$generatedName;
if (!iswritable($path)) {
echo json_encode(array(
  'status' => false,
  'msg'    => 'Destination directory not writable.'
));
exit;
}
if (moveuploadedfile($FILES'file''tmpname', $filePath)) {
echo json_encode(array(
  'status'        => true,
  'originalName'  => $originalName,
  'generatedName' => $generatedName
));
} } else { echo jsonencode(
array('status' => false, 'msg' => 'No file uploaded.')
); exit; }
?> ````

Demos

For more information, examples and usage examples please see demos

LICENCE

MIT