node-upload-progress

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

The Javascript

<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() {
            return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
        }
        
        function S4() {
            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
        }
    });
</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>
# ...

The progress 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"}

See a full example at examples/progress.

Running it

Simple example

$ make simple

Then

open http://localhost:8080

Progress example

$ make progress

Then

open http://localhost:8080

Test suite

$ make test