Next.js Discord

Discord Forum

How to redirect with message after file upload?

Answered
Virginia's Warbler posted this in #help-forum
Open in Discord
Virginia's WarblerOP
Can someone please show me the code for route handlers to redirect and show success/fail message after submitting a form?
Answered by B33fb0n3
then just set a timeout after the result was set and reload it using window not the router. The router holds it state
View full answer

35 Replies

Virginia's WarblerOP
Redirected to the form again.
I dont mind if a flash message appears before or after redirect
So you have a form, add you file inside the form, send the form. The onSubmit function will be triggered (or the server action) and the result is at the client again. There is no redirect 🤔
Virginia's WarblerOP
ok, I meant refresh
@Virginia's Warbler ok, I meant refresh
Saint Hubert Jura Hound
Then u dont need to refresh. U can put the result of the submit in state
@Virginia's Warbler ok, I meant refresh
Yea, that what GetFookedLad said: you await the result and can directly see the result.

If you share a little code we might help you better because we know then where you are 👍
Virginia's WarblerOP
Thank you
@Virginia's Warbler Thank you
happy to help. Please mark solution 👍
@B33fb0n3 happy to help. Please mark solution 👍
Virginia's WarblerOP
How do I do that?
You can ping me in new threads, when you need more help :)@Virginia's Warbler
Virginia's WarblerOP
However, it seems like I have to refresh, else the newest upload doesnt show
So what's the best way to refresh in Next? @B33fb0n3
Northern Rough-winged Swallow
just use useFormState
and ispending
@Virginia's Warbler However, it seems like I have to refresh, else the newest upload doesnt show
We changed nothing from the code before. So when you upload a new file the newest result will be displayed
Virginia's WarblerOP
Actually that doesnt happen
@Northern Rough-winged Swallow just use useFormState
Virginia's WarblerOP
This simply checks whether form finshed processing or not.
How does this apply here?
After some Googling, I should use router.reload(); for refresh, right?
@Virginia's Warbler Actually that doesnt happen
You don’t need anything from that. The result is saved inside a useState and the way how react works is, that if a useState is changed, the component will be rerendered to show the new result.

When I send you a video of your code working on my Maschine, would you trust it?
Virginia's WarblerOP
I believe you. But the reality for me is, the newly added thing isnt showing.
Btw, I have my form and list on the same page
Virginia's WarblerOP
Could it be because only the form is rerendering, not the whole page
@Virginia's Warbler Could it be because only the form is rerendering, not the whole page
I just created a codesandbox and as you can see (with my code), that the page is not reloaded, when submitting a file:
https://codesandbox.io/p/github/B33fb0n3/Next-Tailwind-Typescript/master?import=true
Virginia's WarblerOP
Yes, currently, its not reloaded.
My goal now is to make it reload so that the newest upload can show
@Virginia's Warbler Yes, currently, its not reloaded. My goal now is to make it reload so that the newest upload can show
I just updated the codesandbox. Now you can upload the file, the result will be shown and if you need to you can reload the page by click on show newest upload
Virginia's WarblerOP
That's a solution. Thank you for helping
Virginia's WarblerOP
But if I want to display the result message for 2 seconds, then refresh, how can that be done?
I tried placing router.reload(); (from next/navigation) after setResult(result), but that didnt work
@Virginia's Warbler But if I want to display the result message for 2 seconds, then refresh, how can that be done?
then just set a timeout after the result was set and reload it using window not the router. The router holds it state
Answer