How to upload large files(~1 gb) through next js(maybe it's a more generic web question)?
Answered
Teut2711 posted this in #help-forum
Teut2711OP
So I am using Next Js 15(latest version) and useActionState
to submit a file with a file attachment. The file is of the aforementioned size. How do I upload it to my server. I am running aws and everything is inhouse, no AWS/GCP etc.
I was able to do it in earlier version of nextjs but somehow this upgrade added some limitations.
to submit a file with a file attachment. The file is of the aforementioned size. How do I upload it to my server. I am running aws and everything is inhouse, no AWS/GCP etc.
I was able to do it in earlier version of nextjs but somehow this upgrade added some limitations.
GET /upload 200 in 3086ms
⨯ TypeError: fetch failed
at async fileUploadAction (src\app\(loggedIn)\upload\actions.tsx:16:19)
14 | }
15 |
> 16 | const response = await fetch(benposFileUploadLink, {
| ^
17 | method: "POST",
18 | headers: {
19 | Authorization: `Token ${accessToken}`, {
digest: '1827344237',
[cause]: [Error [HeadersTimeoutError]: Headers Timeout Error] {
code: 'UND_ERR_HEADERS_TIMEOUT'
}
}
POST /upload 500 in 339566msAnswered by Anay-208 | Ping in replies
Wait @Teut2711, What do you exactly want to discuss, like just the methods, difference between webworkers and websocket, and which one is better, right?
anything else except for that in #discussions ?
anything else except for that in #discussions ?
46 Replies
Teut2711OP
So, since the file is big, in production scenario, uploading a file like bare form data will be impractical. So I looked at Streaming api in browser and also the websocket way. Now according to what I understand, the streaming API approach fails since first file is uploaded to next js backend and then my django rest server through streams since the use of streams would be in "action".
So what should be the correct way to handle it? Any examples?
is this the right approach? it's just too much code .
@Teut2711 https://claude.ai/public/artifacts/e3b673ad-46b5-4675-bd32-4dff9a21e3f7
Why don't you send directly from frontend to a different backend
Teut2711OP
using webworkers only?
Also then why is even all this abstraction made in nextjs? After doing it a few times it's just looks like I am just creating more code
like I can submit data directly to my backend, why even use this useFormAction thing
@Teut2711 like I can submit data directly to my backend, why even use this useFormAction thing
If you've a different backend, you don't need to use backend in Next.js
I m talking about server actions
Teut2711OP
understood
my backend is django
You can do everything in django itself
Teut2711OP
i will need nextjs for ui
i know that I can now use react using cdn in templates wherever required but don't know why it feels awkward
@Teut2711 i will need nextjs for ui
You can like use Next.js for fetching items in server, like if you're displaying products it can be fetched
Teut2711OP
ok, I get your point
wherever it's rendering, I will use next js, but wherever it 's client wants to send data to backend, i will straight away send to django instead of nextjs node(or whatever) server
Yes, you can do that, as long as you do the necessary stuff like authentication in the backend
Teut2711OP
I do have that
the django backend is what actually mutates data so it gotta be protected
also whats the strategy for uploading a big file?
websockets or the worker pool?
is worker pool overkill?
websockets would be better
Teut2711OP
are you saying it from experience or guessing?
ok, will use websockets, thank you @Anay-208 | Ping in replies
I think the websocket will need to run in a worker
whatever async await cannot do it without that
@Teut2711 are you saying it from experience or guessing?
I'm not really saying from experience in this case, but I beleive websocket would be better for uploading file
Teut2711OP
how can I join the discussion group?
maybe someone has done it before in plenty there?
@Teut2711 how can I join the discussion group?
You can also request access for it in #discord-feedback, I'm not sure if they'll give the roles, but you can try
Teut2711OP
Thanks, I tried messaging a moderator
@Teut2711 Thanks, I tried messaging a moderator
I don't recommend message, just post it in #discord-feedback without pinging.
Teut2711OP
Will do this then, thanks
Summary:
- You can just directly send request to backend for uploading file, since its not in Next.js
- I recommended you to use streaming for it, since its for large file
- You can just directly send request to backend for uploading file, since its not in Next.js
- I recommended you to use streaming for it, since its for large file
Can you mark above message as a solution
Teut2711OP
How to?
Wait @Teut2711, What do you exactly want to discuss, like just the methods, difference between webworkers and websocket, and which one is better, right?
anything else except for that in #discussions ?
anything else except for that in #discussions ?
Answer
Teut2711OP
Yes for now
State that in #discord-feedback
Just write something like I wanted to discuss different methods of uploading large file, like web workers or Websockets
Teut2711OP
I wrote that only
@Teut2711 Leave it, I don't think they'll give access for this type of discussion
Teut2711OP
How to mark it resolved?