Unexpected end of form error when using Multer

Matthew C.

—September 15, 2024

The Problem

When using Multer, which is a node.js middleware for handling multipart/form-data, you may encounter the following error when trying to upload a file from a form:

Error: Unexpected end of form

The error occurs during parsing the form data, which is done by one of Multer’s dependencies, busboy. The error indicates that the form data is incomplete or not structured correctly. For example, it may be missing the final closing boundary that separates the different parts of the multi-part form data.

The error may occur when using more than one npm library to upload files. For example, if you use Multer and express-fileupload in the same API route:

app.use(fileUpload());
const upload = multer({ dest: "uploads/" });

app.post(
  "/profile",
  upload.single("avatar"),
  (req, res, next) => {
    res.send("File uploaded successfully!");
  },
  (error, req, res, next) => {
    console.log(error.message);
    res.status(500).send({ error: error.message });
  },
);

When posting data to this endpoint, you need to pass in multi-part form data. For example, the submission <form> tag needs the "multipart/form-data" enctype attribute added to it and the method type must be "post" for sending files:

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
  <button type="submit">Submit</button>
</form>

The enctype attribute specifies the encoding type the browser should use when sending the data to the server. When set to multipart/form-data, the form data is split into multiple parts, one for each file and one for any text input data in the form.

In the above API route the fileUpload() method of express-fileupload, which also depends on busboy, parses the request and alters it. The file property of the req object is undefined and the file data is added to the files property of the req object. Multer attempts to parse the parsed stream, causing the error.

The Solution

Only use one library or middleware for file uploads, or only use one per API route:

const upload = multer({ dest: "uploads/" });

app.post(
  "/profile",
  upload.single("avatar"),
  (req, res, next) => {
    res.send("File uploaded successfully!");
  },
  (error, req, res, next) => {
    console.log(error.message);
    res.status(500).send({ error: error.message });
  },
);

Also check that none of your middleware, such as body-parser, alters the incoming multi-part form data request unexpectedly.

You may also get this error if you use Multer inside a cloud function, such as Google Cloud or Firebase functions. The Multer dependency busboy calls the following to stream in the request body for processing:

req.pipe(busboy)

Google Cloud functions pre-stream the entire request body into a custom res.rawBody property that causes a parsing error in Multer. There’s an open Multer GitHub issue for this error: Add configuration parameter to support Google Cloud Functions.

Alternatively, you can use the lower-level busboy library instead of Multer to fix this issue. Replace req.pipe(busboy) with busboy.end(req.rawBody) when using cloud functions as discussed in this Busboy GitHub issue.