Parsing multipart/form-data with Node.js

Sending files from the browser to the web server is a common task that web developers encounter. The HTTP POST method is the tool for the job.

Client Side

Collecting the files to upload is done via the FormData object — either using HTML’s native <form> element or JavaScript’s new FormData() constructor. This is the easy part.

let url = new URL(window.location.href);
let input = document.querySelector("#add-file-input-button");
if(input){
  input.addEventListener('change', async function(){
    let formData = new FormData();
    formData.append('color', 'blue');
    formData.append("userfile", input.files[0]);
    return await fetch(url.origin + "/myapp", {
      method: "POST",
      body: formData
    });
  })
}

Server Side / Node.js

Parsing the body of an incoming POST message is well documented and straightforward — provided that the incoming message does not include files. In our case, we are receiving files.

Step 1. Determine If You Are Receiving Files

Read the request.headers[“content-type”] value. If this value is `multipart/form-data` then you might be receiving files. Any other content type means that you are not receiving files.

Step 2. Parse The multipart/form-data Body

This is the not so easy part. The body is going to be a big string — not easily handled using native JavaScript array or object methods. How do you know where one file begins and another ends, and what about file names?

Back to the content-type header. If you happened to view that value you may have noticed a boundary= section. The HTML spec details the formatting.

💡 Speed up your blog creation with DifferAI.

Available for free exclusively on the free and open blogging platform, Differ.

Try DifferAI — Your Free Writing Assistant

a boundary is selected that does not occur in any of the data

multipart/form-data; boundary= — — WebKitFormBoundary2AaBMYDlHKwzFxT4

body: ------WebKitFormBoundary2AaBMYDlHKwzFxT4
Content-Disposition: form-data; name="color"

blue
------WebKitFormBoundary2AaBMYDlHKwzFxT4
Content-Disposition: form-data; name="userfile"; filename="a.txt"
Content-Type: text/plain

testing 12.
------WebKitFormBoundary2AaBMYDlHKwzFxT4--

The body above includes a name / value pair and a file named a.txt.

Now you can see the task at hand on the server / Node.js. That string needs to be split and spliced and trimmed up and then you can do what you want with the data.

Conclusion

Now you have an idea of how to handle file uploads on the server / Node.js. The best package out there that does all this for you is called busboy. Happy coding!

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io