Summary:
Uploading a file to a custom webapp with Chromium (Edge) works but consistently fails in Firefox. In Firefox the request is created, and times out. The server re… (xem thêm)
Summary:
Uploading a file to a custom webapp with Chromium (Edge) works but consistently fails in Firefox. In Firefox the request is created, and times out. The server receives no file and logs “missing file.” The same webapp code is running on both Chromium and Firefox.
Environment:
- Next.js app (pages/api route)
- Endpoint: POST /api/file-upload
- Client: fetch(url, { method: "POST", body: FormData, credentials: "include" })
- Server: export const config = { api: { bodyParser: false } } + multipart parsing (formidable)
- Edge/Chromium: Version 141.0.3537.85
- Firefox Version 147.0.3 (64-bit)
- OS: Ubuntu 22 / Linux
Steps to reproduce:
- Create a FormData object and append a local file:
const fd = new FormData();
fd.append("template", file, file.name);
fetch(`/api/file-upload`, {
method: "POST",
body: fd,
- In Edge/Chrome, upload succeeds. Server receives multipart body and parses the file. Actual behavior in Firefox:
- Transferred: 0 B
- No response status/body
- Client times out (Upload times out)
- File upload request received
- No bytes read server‑side.
Evidence:
- Edge request logs:
- content-type: multipart/form-data; boundary=----WebKitFormBoundary...
- bytesRead ~1.69MB
- Firefox request logs:
- Transferred 0 B
- File upload missing file field
Notes:
- Client FormData is valid; we log file.name and file.size right before fetch.
- There is a CSP report‑only warning (frame‑ancestors) when using a fallback iframe approach, but we are not using iframe in the failing case.
Question:
Is there a known issue where Firefox blocks or fails to send and multipart/body can be stripped before it leaves the browser? Is there a recommended workaround that does not rely on browser sniffing?
Moderator note: This question has been edited to correct the formatting.
