Question

I am trying to make a Node.js file uploader with a AJAX progress bar.

var formidable = require('./formidable'), http = require('http'), sys = require('sys');
 http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    var form = new formidable.IncomingForm();
    form.uploadDir = './node_uploads';
    form.keepExtensions = true;
    //print the upload status in bytes
    form.addListener("progress", function(bytesReceived, bytesExpected) {
        //progress as percentage
        progress = (bytesReceived / bytesExpected * 100).toFixed(2);
        mb = (bytesExpected / 1024 / 1024).toFixed(1);
        sys.print("Uploading "+mb+"mb ("+progress+"%)\015");
    });
    //enter here after upload complete
    form.parse(req, function(fields, files) {
        sys.debug("Upload Complete");
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        res.end());
    });
    return;
  }
  if (req.url == '/update') {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('<?xml version="1.0"?><response><status>1</status><message>'+ 000 +'</message> </response>');
        res.end();

    }
  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end
    ( '<form action="/upload" enctype="multipart/form-data" method="post">'
    + '<p id="statuslabel"></p><p id="anotherlabel"></p>' 
    + '<input type="text" name="title" id="title"><br>'
    + '<input type="file" name="upload" multiple="multiple"><br>'
    + '<input type="submit" value="Upload" id="uploadform">'
    + '</form>'
    );
}).listen(8000, '127.0.0.1');

The jQuery is quite lengthy so I have cut it out but all it does is start a timer and request data from update and set on the label.

With this code will node accept multiple uploads from different hosts ?
Also Firefox doesnt seem to work but Safari/Chrome does any idea ?
How would I request a status for the file upload ?

Thanks, Alex

Answer 1

One thing you’ll need is a way to identify a particular upload uniquely. The form should include a unique ID as a hidden field that identifies the upload. Then when doing the upload you can keep a map of ID -> progress level and the “update” call would pass that ID to make sure it is looking at the right progress indicator.

What you may find, however, is that browsers only allow a limited number of connections to the server. So, your request for a progress update might wait for the actual upload to finish before it even gets sent to the server.

To get around it you might need to use socket.io to open a connection to the server that stays open before initiating the upload, and receive updates on that connection as the upload progresses.