Hi everyone,

I’m currently working on a project where I need to implement image upload functionality. However, I'm encountering a 404 error when trying to upload an image. The image upload process fails with the following details:

Error Code: 404 Not Found
Request URL: http://localhost:3000/upload
Method: POST
Expected Behavior: The image should be uploaded successfully to the server.
I’ve double-checked my route handling in both the front-end and back-end, but I’m still unable to resolve this issue. Here’s a brief overview of my setup:

Front-end: I’m using React with Dropzone for image selection.
Back-end: Using Next.js API routes to handle the upload request.
Possible Issue: I suspect the error might be due to improper routing or a misconfiguration in my file

handling on the server-side.
Things I've already checked:

The upload route in Next.js is correctly set up in the pages/api/upload.ts.
The POST request is being sent correctly from the front-end.
No issues are reported in the browser's dev tools except for the 404 error.
Has anyone faced a similar issue, or could anyone guide me on what might be going wrong? Any help or suggestions would be greatly appreciated.