I've been banging my head against this bug for a couple of hours now and I just can't seem to figure out the reason behind it. The issue is with an API route I'm trying to set up in next.js where I need to modify an image and then upload it to storage. When I upload an image from localhost and make the fetch request, no file is found in the API route and I end up getting back an empty object. Strangely though, everything works fine when I send the request through Postman. I'm puzzled as to what could be causing this discrepancy and any help would be greatly appreciated!
Below is the code snippet that gets executed on the client side. It currently logs {} to the console.
onClick={async () => {
const data = new FormData();
data.append("image", imageFile);
const res = await fetch("/api/cropImages", {
method: "POST",
data,
});
console.log(await res.json());
}}
Next, here's the relevant part of my API route:
import { IncomingForm } from "formidable";
export const config = {
api: {
bodyParser: false,
},
};
export default async (req, res) => {
const data = await new Promise((resolve, reject) => {
const form = new IncomingForm();
form.parse(req, (err, fields, files) => {
if (err) return reject(err);
resolve({ fields, files });
});
});
const file = data?.files?.image;
console.log(file);
res.status(200).json({ file });
};If you're curious, this is how the request looks like in Postman:
And finally, here is the link to the image file: imagefile