File Upload with Background Processing and Toast Updates
Unanswered
Spectacled Caiman posted this in #help-forum
Spectacled CaimanOP
I'm in the process of planning a feature for my Next.js project. The feature involves a file upload form, and once users submit files, they should be redirected to another page while the file upload process occurs in the background. I want to implement a toast at the bottom right of the page that displays the upload progress (similar to Google Drive). The goal is to allow users to navigate across pages while the upload toast persists and updates accordingly.
I'm seeking advice on the best approach to implement this feature, particularly whether it's achievable without using a state management library. My initial thought was to utilize a
I'm seeking advice on the best approach to implement this feature, particularly whether it's achievable without using a state management library. My initial thought was to utilize a
layout.tsx and integrate the upload progress toast there. However, I'm uncertain about where to invoke the upload function and how to establish a connection between the upload progress and the toast. Any guidance on how to implement this architecture effectively would be greatly appreciated.1 Reply
File upload always becomes a pain when you wanna add more complexities to it.
My idea would be to stick the toast and file input element in the root layout. You style the file input field to be hidden and then on the page you want the file input to be, you use a div to style it up exactly like how you want the file input to look. You then get get the reference for the input in the layout and send it to the component with the visual file input field, where you make it invoke the open function and the like when the user clicks on it. This would make it so that the upload will be sent to the input field in the root layout and when you redirect and such, it won't be blocked.
My idea would be to stick the toast and file input element in the root layout. You style the file input field to be hidden and then on the page you want the file input to be, you use a div to style it up exactly like how you want the file input to look. You then get get the reference for the input in the layout and send it to the component with the visual file input field, where you make it invoke the open function and the like when the user clicks on it. This would make it so that the upload will be sent to the input field in the root layout and when you redirect and such, it won't be blocked.