JSFiddle - React, Tailwind, and code Playground

JavaScript

var http = require('http');
var formidable = require('formidable');
var progressServer = require('./progressServer');

var server = http.createServer(function(req,res) {
  switch (req.method) {
    case 'GET': {
      show(req, res);
      break;
    }
    case 'POST': {
      upload(req, res);
      break;
    }
  }
});
/////
var io = require('socket.io')(server);
/////

function show(req, res) {
  var html = ''
    + '<form method="POST" action="/" enctype="multipart/form-data">'
    + '<p><input type="text" name="name" /></p>'
    + '<p><input type="file" name="file" /></p>'
    + '<p><input type="submit" value="Upload" /></p>'
    + '</form>'
    + '<script type="text/javascript" src="/socket.io/socket.io.js"></script>'
    + '<script>var socket = io.connect();'
    + 'socket.on("progress", function(progress) {'
    + 'console.log(progress)'
    + '});'
    + '</script>';
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Content-Length', Buffer.byteLength(html));
  res.end(html);
}

function upload(req, res) {
  if (!isFormData(req)) {
    res.statusCode = 400;
    res.end('Bad Request: expecting multipart/form-data');
    return;
  }

  var form = new formidable.IncomingForm();

  form.on('end', function() {
    res.end('Upload Complete!');
  });

  form.on('progress', function(bytesReceived, bytesExpected) {
    var percent = ''+Math.floor(bytesReceived / bytesExpected * 1000)/10;
    percent += percent.length < 4 ? '.0%' : '%';
    /////
		io.emit('progress', percent);
		/////
  });

  form.parse(req);
}

function isFormData(req) {
  var type = req.headers['content-type'] || '';
  return 0 == type.indexOf('multipart/form-data');
}

server.listen(8080);