Node.js AJAX file uploader

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

I can't answer this, but make sure to stop into #node.js and ask questions! — DTrejo
– DTrejo, Commented Mar 30, 2011 at 4:46
sadly not, ran out of free time.. this might help github.com/felixge/node-formidable or check out felixge's debuggable blog posts he covers alot of these issues. — Alex
– Alex, Commented May 26, 2011 at 13:13

Dobes Vandermeer · Accepted Answer · 2011-12-02 13:12:13Z

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.

answered Dec 2, 2011 at 13:12

Dobes Vandermeer

8,8506 gold badges48 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phil · Accepted Answer · 2012-06-22 12:23:02Z

0

In order to just Answer the thrid question

How would I request a status for the file upload ?

Formidable has an event "progess":

Event: 'progress' (bytesReceived, bytesExpected)

With this, you can easily keep track of your progress and return it on your prepared update-call.

So just poll with your ajax on your update call with for instance a session ID or another unique identifier both sides know.

answered Jun 22, 2012 at 12:23

Phil

3,3721 gold badge23 silver badges17 bronze badges

Collectives™ on Stack Overflow

Node.js AJAX file uploader

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related