Formidable doesn't just handle uploaded files, it will also process general POST data. All we have to do is add a listener for the field event to process forms that contain both files and user data, as follows:

incoming.on('file', function (field, file) {
  response.write(file.name + ' received\n');
}).on('field', function (field, value) {
 response.write(field + ' : ' + value + '\n');
}).on('end', function () {
  response.end('All files received');
});

There's no need to manually implement field data size limits as formidable takes care of this for us, although we can change the defaults with incoming.maxFieldsSize, which allows us to limit the total byte count for the sum of all fields. This limit doesn't apply to file uploads.

When formidable places our files in the uploads directory, it assigns them a name that consists of a randomly generated hexadecimal number. This prevents files of the same name from being overwritten. However, what if we want to know which files are which and still retain the unique filename advantage? We can alter the way formidable names each file during its fileBegin event with the help of the following code:

if (request.method === "POST") {
  var incoming = new formidable.IncomingForm();
  incoming.uploadDir = 'uploads';
 incoming.on('fileBegin', function (field, file) {
 if (file.name){
 file.path += "-" + file.name;
 } //...rest of the code
  }).on('file', function (field, file) {
//...rest of the code

We've appended the original filename onto the end of the random filename assigned by formidable, separating them with a dash. Now we can easily identify our files, though for many scenarios this may not be necessary as we would likely be outputting file information to a database and cross-referencing it to randomly generated names.

It's also possible to upload files via an HTTP PUT request. While we can only send one file per request, we don't need to do any parsing on the server side since the file will simply stream directly to our server, which means less server-side processing overhead. It would be magnificent if we could achieve this by changing our form's method attribute from POST to PUT, but alas, no. However, thanks to the up and coming XMLHttpRequest Level 2 (xhr2) request, we can now transfer binary data via JavaScript in some browsers (see http://caniuse.com). We grab a file pointer using a change event listener on the input file element, and then we open a PUT request and send the file. The following is for use in our form.html file, which we'll save as put_upload_form.html:

<form id=frm>
  <input type=file id=userfile name=userfile><br>
  <input type=submit>
</form>
<script>
(function () {
  var userfile = document.getElementById('userfile'),
  frm = document.getElementById('frm'),
  file;
  userfile.addEventListener('change', function () {
    file = this.files[0];
  });
  frm.addEventListener('submit', function (e) {
    e.preventDefault();
    if (file) {
      var xhr = new XMLHttpRequest();
      xhr.file = file;
      xhr.open('put', window.location, true);
      xhr.setRequestHeader("x-uploadedfilename", file.fileName || file.name);
      xhr.send(file);
      file = '';
      frm.reset();
    }
  });
}());
</script>

Our script attaches a change listener to the file input element. When the user selects a file, we are able to capture a pointer to the file. As the form is submitted, we prevent default behavior, check whether a file is selected, initialize an xhr object, open a PUT request to our server, and set a custom header (which we'll be calling X-UPLOADEDFILENAME), so we can grab the filename later and send the file to our server. Our server code looks like the following:

var http = require('http');
var fs = require('fs');
var form = fs.readFileSync('put_upload.html');
http.createServer(function (request, response) {
  if (request.method === "PUT") {
    var fileData = new Buffer(+request.headers['content-length']);
    var bufferOffset = 0;
    request.on('data', function(chunk) {
      chunk.copy(fileData, bufferOffset);
      bufferOffset += chunk.length;
    }).on('end', function() {
      var rand = (Math.random()*Math.random())
      .toString(16).replace('.','');
      var to = 'uploads/' + rand + "-" +
      request.headers['x-uploadedfilename'];

      fs.writeFile(to, fileData, function(err) {
        if (err) { throw err; }
        console.log('Saved file to ' + to);
        response.end();
      });
    });
  }
  if (request.method === "GET") {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end(form);
  }
}).listen(8080);

Our PUT server follows a similar pattern to the simple POST server in the Processing POST data recipe; we listen to the data event and piece the chunks together. However, rather than a string concatenating our data, we must pass our chunks into a buffer because a buffer can handle any data type including binary, whereas a String object will always coerce non-string data into string format—this changes the underlying binary, resulting in corrupted files. Once the end event is triggered, we generate a random filename similar to the naming convention of formidable and write the file to our uploads folder.

This uploading via PUT demonstration will not work in older browsers, so an alternative fallback should be provided in a production environment. Browsers that will support this method are IE10 and above, Firefox, Chrome, Safari, iOS 5+ Safari, and Android browsers. However, due to browser vendors' differing implementations of the same functionality, the example may need some tweaking for cross-browser compatibility.