Question

I am very new in node.js.

I am currently working on a file upload service. I used xhr polling in client side as below:

var xhr = new XMLHttpRequest();
var onProgress = function(e) {
    console.log(e);
};
var formData = new FormData();
formData.append('file_name_input', file_name_input[0].files[0]);
xhr.addEventListener('progress', onProgress, false);
xhr.open('post', 'http://ServerAddress/upload', true);
xhr.send(formData);

On server I use formidable and the code like that:

var http = require('http'),
    formidable = require('formidable');

var server = http.createServer(function(request, response) {
   if (request.url == '/upload' && request.method.toLowerCase() == 'post') {
       var form = new formidable.IncomingForm();
       form.addListener('progress', function(bytesReceived, bytesExpected){
           response.write(bytesReceived);
       });
   }
});

My problem is this code did not roll my own Progress bar. How can I roll my own progress bar from client?

Answer 1

You can start from looking at how existing library such as jQuery File Upload implements progress bar. It uses twitter’s bootstrap for rendering the progress bar