How to redirect with message after file upload?
Answered
Virginia's Warbler posted this in #help-forum
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
35 Replies
@Virginia's Warbler Can someone please show me the code for route handlers to redirect and show success/fail message after submitting a form?
Where will the message appear, when you will be redirected?
Virginia's WarblerOP
Redirected to the form again.
I dont mind if a flash message appears before or after redirect
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 👍
If you share a little code we might help you better because we know then where you are 👍
Virginia's WarblerOP
Ok, here the relevant code
- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/page.tsx#L16
-- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/_components/UploadForm.tsx
and the API that handles it
- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/api/entries/route.ts#L16-L34
- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/page.tsx#L16
-- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/_components/UploadForm.tsx
and the API that handles it
- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/api/entries/route.ts#L16-L34
and I dont quite get what you mean by ""put result in state"
@Virginia's Warbler Ok, here the relevant code
- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/page.tsx#L16
-- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/_components/UploadForm.tsx
and the API that handles it
- https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/api/entries/route.ts#L16-L34
thanks. So you get and log (right now) the result [here](https://github.com/Ruslan-Aliyev/Next-Tailwind-Typescript/blob/master/src/app/_components/UploadForm.tsx#L22)
Instead of logging it, you can show the client a success/fail message.
I made a pull request, so you can take a look at the changes. 👍
Instead of logging it, you can show the client a success/fail message.
I made a pull request, so you can take a look at the changes. 👍
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
@B33fb0n3 You can ping me in **new threads**, when you need more help :)<@755712126844403722>
Virginia's WarblerOP
Thank you v much
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?
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?
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
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
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
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 uploadVirginia'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