Let's create a new folder called uploading-a-file and create a server.js file and an uploads directory inside that:
$ mkdir uploading-a-file
$ cd uploading-a-file
$ touch server.js
$ mkdir uploads
We'll also want to initialize a package.json file and install multipart-read-stream and pump.
On the command line, inside the uploading-a-file directory, we run the following commands:
$ npm init -y
$ npm install --save multipart-read-stream pump
For more about streams (and why pump is essential), see the previous chapter, Chapter 4, Using Streams.
Finally, we'll make some changes to our form.html file from the last recipe:
<form method="POST" enctype="multipart/form-data">
<input type="file" name="userfile1"><br>
<input type="file" name="userfile2"><br>
<input type="submit">
</form>
We've included an enctype attribute of multipart/form-data to signify to the browser that the form will contain upload data and we've replaced the text inputs with file inputs.
To gain some understanding of how multipart requests differ from normal POST requests, let's use our newly modified form.html file with the server from the previous recipe to see how a server without multipart capabilities handles a multipart upload.
If we upload the form.html file itself, we should see something like the following:
Our original POST server simply logs the raw HTTP message body to the console, which in this case is multipart data.
We had two file inputs on the form. Though we only uploaded one file, the second input is still included in the multipart request. Each file is separated by a predefined boundary that is set in a secondary attribute of the Content-Type HTTP headers.