API route doen't read formData in some cases

dam216 — Fri, 02 Dec 2022 14:09:58 +0000

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

DEV Community: dam216

API route doen't read formData in some cases