It's a Node.js module to handle upload and upload-progress.
##Instal
$ npm install node-upload-progress
or
# package.json
# ...
"dependencies": {
"node-upload-progress": "latest"
}
# ...
$ npm install
##Usage
###Simple
var app = require('http');
var uploadProgress = require('node-upload-progress');
uploadHandler = new uploadProgress.UploadHandler;
The uploadHandler.uploadDir is the path where the files will be saved. Without this configuration the files will be saved in a path based on process.env.TMP.
uploadHandler.configure(function() {
this.uploadDir = __dirname + '/uploads';
});
app.createServer(function(req, res) {
if (req.url === '/upload') {
uploadHandler.upload(req, res);
return;
}
# ...
}
####Custom response body
Configuring the uploadHandler.onEnd = customOnEndHandler, you can write your own response body.
# ...
uploadHandler.configure(function() {
this.uploadDir = "" + __dirname + "/uploads";
this.onEnd = customOnEndHandler;
});
function customOnEndHandler(req, res){
res.writeHead 200, {'Content-Type': 'text/plain'}
res.end('Upload received');
}
app.createServer(function(req, res) {
if (req.url === '/upload') {
uploadHandler.upload(req, res);
return;
}
# ...
}
See a full example at examples/simple.
##Progress
If you want to use an upload progress similar to Nginx Upload Progress Module, you can easily do it using the progress handler.
# ...
app.createServer(function(req, res) {
if (req.url.match(/\/upload\?X\-Progress\-ID=.+/)) {
uploadHandler.upload(req, res);
return;
} else if (req.url.match(/\/progress\?X\-Progress\-ID=.+/)) {
uploadHandler.progress(req, res);
return;
}
# ...
}
###The view
<script>
$(function(){
$('#form_upload').submit(function(){
var xProgressID = guidGenerator();
$(this).attr('action', '/upload?X-Progress-ID=' + xProgressID);
var uploadIntervalID = setInterval(function(){
$.get('/progress?X-Progress-ID=' + xProgressID, function(data){
if(data.status === 'done'){
clearInterval(uploadIntervalID);
}
updateViewUploadStatus(data);
}).error(function(){clearInterval(uploadIntervalID)});
}, 250);
return true;
});
function updateViewUploadStatus(data){
# ...
}
// http://stackoverflow.com/a/105074/464685
function guidGenerator() {
# ...
}
});
</script>
####The HTML
# ...
<form action="/upload?X-Progress-ID=1" enctype="multipart/form-data" method="post" id="form_upload" target="iframe_upload">
<p>
<label>File</label><br/>
<input type="file" name="upload" id="upload"><br>
</p>
<p>
<input type="submit" value="Upload">
</p>
</form>
<iframe id="iframe_upload" name="iframe_upload"></iframe>
# ...
See a full example at examples/progress.
###The possible status
The upload request hasn't been registered yet or is unknown:
HTTP 404 Not Found
The upload request has ended:
{"bytesReceived":N,
"bytesExpected":N,
"percent":100,
"status":"done",
"fileName":"filename.txt",
"filePath":"uploadDir/filename.txt"}
The upload request is in progress:
{"bytesReceived":N,"bytesExpected":N,"percent":N,"status":"uploading"}
##Running it
###Simple example
$ make simple
Then
open http://localhost:8080
###Progress example
$ make progress
Then
open http://localhost:8080
###Test suite
$ make test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent