I have a component which processes and uploads images. Currently I process the image on my backend and then send it to my frontend and then upload it from there. I would like to do everything on my backend. The only issue is that the upload endpoint requires FormData() object. I found an npm package form-data which I'm using on my backend now, but I'm still getting error.

This is how it currently works:

// frontend logic:
const data = await uploadImage(img);
const file = new File([Buffer.from(data)], `img-${i}.webp`, {
  type: "image/webp",
});
const formData = new FormData();
formData.append("path", "images");
formData.append("files", file, file.name);
await axios
  .post("http://localhost:1338/api/upload", formData, {
    headers: { authorization: `Bearer ${jwtToken}` },
  })
  .then(({ data }) => {
    console.log(data);
  })
  .catch(console.log);

//
//

// backend logic:
const data = await processImage(img.url);
return data;

This is what im trying to do:

// frontend logic:
const data = await uploadImage(img);

//
//

// backend logic:
const data = await processImage(img.url);
const formData = new FormData();
formData.append("path", "images");
formData.append("files", data, "file.name");
await axios
  .post("http://localhost:1338/api/upload", formData, {
    headers: { authorization: `Bearer ${process.env.JWT_TOKEN}` },
  })
  .then(({ data }) => {
    console.log(data);
  })
  .catch(console.log); // I get error: 413 Payload Too Large

I'm trying to do it with the same image which works with the first method. Perhaps I need to create a new File(), but I couldn't find any npm packages which worked for that. What should I do to get this working?