API route doen't read formData in some cases

I have to pass an uploaded image from the NextJS frontend to the NextJS backend. For some other images, the backend code gets the image and with formidable I am able to read its content. For some other PNG/JPG images of 914 KB however, the backend code doesn't seem to be able to run, since it doesn't print out anything in the terminal.

Here is my code:

//FRONTEND
const form = new FormData();
form.append("file", file);

fetch("/api/myApiRouteFile", {
method: "POST",
body: form,
})
.then((res) => res.json())
.then((data) => {
console.log("data", data);
})
.catch((err) => {
console.log("err", err);
});

//Backend code in NextJS API route
import formidable from "formidable";

export const config = {
api: {
bodyParser: false,
},
};

const handler = async (req, res) => {
console.log("CODE RUNNING.... 🚀 "); //with some files, this message is not printed out, so I assume the code was not running. With other images, however, it does, so the code is not always running.

const form = new formidable.IncomingForm();
form.uploadDir = "./";
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
console.log(err, fields, files); //some images gets printed out, some other no.
});
};
export default handler;

Again, when uploading some images, the backend runs well and prints out the uploaded image file data, but for other images, nothing happens.

Does anyone know what could be the problem? Maybe a max file size? Thanks for the help.

With this image the code works well.

With this other image, the API route code is not running

Does someone know what may be the problem and solution?
Thanks very much

Comments

[Experimental Help Bot]

The problem you are encountering may be due to the file size of the images that are not being processed by the backend code. By default, the bodyParser option in the Next.js api config is set to true, which means that it will automatically parse the request body and make it available in the req.body property. However, this option has a maximum file size limit of 1MB, so if the images you are trying to upload are larger than 1MB, they will not be parsed by the bodyParser and will not be available in the req.body property.

To fix this problem, you will need to disable the bodyParser option in the api config, and parse the request body manually using a library like formidable. This will allow you to handle the uploaded files and process them regardless of their size.

Here is an example of how you might modify your code to disable the bodyParser option and parse the request body manually using formidable:

// FRONTEND
const form = new FormData();
form.append("file", file);

fetch("/api/myApiRouteFile", {
  method: "POST",
  body: form,
})
  .then((res) => res.json())
  .then((data) => {
    console.log("data", data);
  })
  .catch((err) => {
    console.log("err", err);
  });

// BACKEND code in Next.js API route
import formidable from "formidable";

export const config = {
  api: {
    bodyParser: false, // Disable the body parser
  },
};

const handler = async (req, res) => {
  // Use formidable to parse the request body
  const form = new formidable.IncomingForm();
  form.uploadDir = "./";
  form.keepExtensions = true;

  form.parse(req, (err, fields, files) => {
    console.log(err, fields, files);
  });
};

export default handler;

In this example, the bodyParser option in the api config has been set to false to disable the automatic request body parsing. This means that the request body will not be automatically parsed and will not be available in the req.body property. Instead, the formidable library is used to parse the request body manually, and the uploaded files are made available in the files property of the form.parse callback.

By disabling the bodyParser option and parsing the request body manually using formidable, you should be able to process uploaded files of any size in your Next.js API route. Note that you will need to handle the files yourself and make sure that they are stored or processed correctly, as the req.body property will not be available when the bodyParser option is disabled.

---

I'm an experimental help bot that leverages ChatGPT. As such, the answers I provide may be incorrect, incomplete, or even nonsensical. I am not associated with OpenAI.

Please reply to my comment(s) with your own corrections and feedback.