Help processing multipart/form-data
Answered
gin posted this in #help-forum
ginOP
Idk if this is the right place to ask but im trying to solve this issue i have for couple of days now. I tried everything but it just not working with http based webserver (node module)
Answered by gin
alright solved it.
setting headers like like this and always returning the reponse with the headers fixed my issue
setting headers like like this and always returning the reponse with the headers fixed my issue
export function middleware(request: NextRequest) {
const response = NextResponse.next();
response.headers.set("Access-Control-Allow-Origin", "*");
response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
response.headers.set("Access-Control-Allow-Headers", "Content-Type");
return response;
}77 Replies
ginOP
So when for example i upload a file larger then 100mb the request goes trough but stops on the OPTIONS request and not going trough the POST at all
indicating something wrong with the webserver itself
i did the same thing with golang, setting up a simple webserver and processing multipart -> works fine
no nginx, no apache, no reverse proxy
if (req.method === "OPTIONS") {
res.writeHead(200, {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "POST",
"Access-Control-Allow-Headers": "Content-Type",
});
console.log("OPTIONS request");
res.end();
}
if (req.method === "POST") {
if (req.url === "/evidence/add") {
console.log("POST request");
const bb = busboy({
headers: req.headers,
});
bb.on("file", (name, file, info) => {
console.log(`File [${name}]: start`);
const saveTo = path.join(__dirname, "uploads", info.filename);
file.pipe(fs.createWriteStream(saveTo));
});
bb.on("close", () => {
res.writeHead(200, {Connection: "close"});
});
req.pipe(bb);
return;
}
}small files -> goes trough OPTIONS -> large files(over 100mb) stops at OPTIONS
there has to be something im missing out
ginOP
its driving me maaaddddd
i went down to busboy without using formidable or multer or similar but i get the same issue
has to be something with http itself
something deep
i cant even catch the error so what am i suppose to do here
ginOP
bump
ginOP
+
ginOP
bump
ginOP
bump
ginOP
bump
ginOP
bump
try using app dir :''
it is parsed automatically in route handler in app dir
its not next.js?
damn
ginOP
yeah
im stuck for around 4 days trying to get trough it
ive tried everything
using 5 frameworks -> express, koa, nest, fastify -> tried multiple parsers multer, formidable, multiparty
ive tried it with reverse proxy module for nginx and apache
it has to do something with either the node version im using, typescript or something with bun or similar
@ᴉuɐpɹɐɐ u dont have any possible reason right
sry i only use app dir 
ginOP
ok
@ᴉuɐpɹɐɐ it is parsed automatically in route handler in app dir
ginOP
do u know if that same applies to pages
does pages include a parser
@gin do u know if that same applies to pages
no but you should be able to create an api route in app dir
ginOP
@ᴉuɐpɹɐɐ i just made a new next app just for the api route
do i have to set the cors header in the middleware?
uhhh yeah
ginOP
im working from localhost currently thats why
kinda sad
@ᴉuɐpɹɐɐ uhhh yeah
ginOP
alr
@gin im working from localhost currently thats why
it should work with localhost
ginOP
"use server";
import {Evidence} from "@/controllers/evidence/evidence";
const evidence = new Evidence();
export async function POST(req: Request, res: Response) {
return new Response("ok");
}OPTIONS /api/evidence/add 204 in 62ms"use server" does nothing in there
ginOP
it comes trough options as expected
you can get the form data from
req.formDatai dont get the POST
server rejects because of cors
thats why i was asking if have to set it in the middleware
so client knows after options that we accept origin
but u said it is by default already?
I mean in localhost i can just hit POST directly no problem iirc?
But if you have problem with cors theres this
https://nextjs.org/docs/app/building-your-application/routing/middleware#cors
But if you have problem with cors theres this
https://nextjs.org/docs/app/building-your-application/routing/middleware#cors
im already running it on dedicated
oh
ginOP
yeah ill try the middleware hopefully things get resolved with next
thanks for ur time
ginOP
@ᴉuɐpɹɐɐ
it came trough yeahh 250mb upload.
it came trough yeahh 250mb upload.
export async function POST(req: Request, res: Response) {
const formData = await req.formData();
formData.forEach((value, key) => {
console.log(key, value);
});
return new Response("ok");
}ginOP
now the problem is the Response is not returned
@ᴉuɐpɹɐɐ https://tenor.com/view/borat-borat-very-nice-verynice-thumbs-up-gif-25080066
ginOP
alright solved it.
setting headers like like this and always returning the reponse with the headers fixed my issue
setting headers like like this and always returning the reponse with the headers fixed my issue
export function middleware(request: NextRequest) {
const response = NextResponse.next();
response.headers.set("Access-Control-Allow-Origin", "*");
response.headers.set("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
response.headers.set("Access-Control-Allow-Headers", "Content-Type");
return response;
}Answer
ginOP
i was using this
problably because browser for some reason also checks for cors in POST
maybe some thing with xhr
ginOP
Issue fixed
Bun.sh was the main issue of all -> not going to use it for my project further