2.0.0 • Published 9 years ago
ng2-uploader v2.0.0
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
Backend Examples
Basic Example
// 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');
}
}
}
<!-- app.component.html -->
<input type="file"
ngFileSelect
[options]="options"
(onUpload)="handleUpload($event)"
(beforeUpload)="beforeUpload($event)">
<!-- drag & drop file example-->
<style>
.file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
</style>
<div ngFileDrop
[options]="options"
(onUpload)="handleUpload($event)"
[ngClass]="{'file-over': hasBaseDropZoneOver}"
(onFileOver)="fileOverBase($event)"
(beforeUpload)="beforeUpload($event)">
</div>
<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
2.0.0
9 years ago
2.0.0-beta.3
9 years ago
2.0.0-beta.2
9 years ago
2.0.0-beta.1
9 years ago
1.6.2
9 years ago
1.6.1
9 years ago
1.6.0
9 years ago
1.5.7
9 years ago
1.5.6
9 years ago
1.5.5
9 years ago
1.5.4
9 years ago
1.5.3
9 years ago
1.5.2
9 years ago
1.5.1
9 years ago
1.5.0
9 years ago
1.4.1
9 years ago
1.4.0
9 years ago
1.3.1
9 years ago
1.3.0
9 years ago
1.2.0
9 years ago
1.1.1
9 years ago
1.1.0
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago
0.5.15
9 years ago
0.5.14
9 years ago
0.5.13
9 years ago
0.5.12
9 years ago
0.5.10
9 years ago
0.5.9
9 years ago
0.5.7
9 years ago
0.5.6
9 years ago
0.5.5
9 years ago
0.5.4
9 years ago
0.5.3
9 years ago
0.5.2
9 years ago
0.5.1
9 years ago
0.5.0
9 years ago
0.3.5
10 years ago
0.3.3
10 years ago
0.3.0
10 years ago
0.2.5
10 years ago
0.2.3
10 years ago
0.2.2
10 years ago
0.2.1
10 years ago
0.2.0
10 years ago
0.1.0
10 years ago