I have some very strange behavior I cannot figure out on how to solve it. I'm hosting my next app and backend on a small vps, I recently switched hosts and upgraded to node 20 and next 14.

I have a upload form that sends a formdata to my api route at /api/upload. That api route then validates some formdata stuff, adds some fields and forwards that formdata to my backend running on the same machine at localhost:5000, the backend saves the file to disk and returns a json.

Now the issue:
On some files (larger than ~50kb) I get a timeout / ECONNABORTED or nothing at all when trying to upload them and I have no idea why.

It worked fine for months on the old vps / node 18 / next 13.
It works fine with all kind of file sizes when calling the backend route via postman and also works fine when calling that api route via curl on the same host, its just my frontend that somehow refuses to work.

Thats the part of my api route that handles the file upload:
It stops at the first console log in the try/catch. The console logs above are fine, the file is correct, the payload is correct and the url is fine.

    console.log(file);

    console.log(payload);

    try {
        console.log("Uploading to: ", `${process.env.BACKEND_URL}/upload`)

        const response = await fetch(`${process.env.BACKEND_URL}/upload`, {
            method: "POST",
            body: payload,
            headers: {
                "Authorization": token,
            }
        });

        const data = await response.json();

        console.log("Uploaded file to backend, saving to database...")

        const dbResult = await prisma.file.create({
            data: {
                ownerid: session.id,
                filesize: data.size,
                fileid: data.id,
                url: data.filePath,
                private: false,
                tags: tags.join(","),
                title: title,
                filetype: extension
            }
        })
        return NextResponse.json(dbResult);
    } catch (e) {
        console.error(e);
        return NextResponse.json("Something went wrong", { status: 500 })
    }

Can anyone help me to figure out why its not working?
Since its working with postman or curl on the same host, I assume its not a issue with my backend (express & multer).
And since I did multiple changes (switched host, upgraded next & node) I'm not sure what is causing that issue.

the console output:

File {
  size: 302509,
  type: 'image/png',
  name: 'test2.png',
  lastModified: 1701444552967
}
FormData {
  [Symbol(state)]: [
    { name: 'title', value: 'test2' },
    { name: 'tags', value: 'Image' },
    {
      name: 'subfolder',
      value: '2776f3da-da84-41ed-b3fc-b06e05905f3d'
    },
    { name: 'file', value: [File] }
  ]
}
Uploading to:  http://localhost:5000/api/v1/upload

In this example it just stuck for like 15 seconds at "uploading to" and then nothing, no error and no success.


The few lines on my express backend:

const router = express.Router();

const multerUpload = multer({ storage: multer.memoryStorage() });

router.route("/").post(requireToken, multerUpload.single("file"), uploadSingleFile)

requireToken has a console log and uploadSingleFile has a console log and when uploading via the next frontend it does print the log from requireToken but never enters the uploadSingle file AND does not throw any error.