So, I have a multi-step form that is dynamically built depending on the user's answers. The created form can have multiple "file upload" steps.
In the proof of concept, we used the sessionStorage to store all the data from all the steps. And at the last step, when clicking the "submit" button, all the data is sent to the server. However, the sessionStorage has a limit (of 5MB, if I am not mistaken).
As a solution, I thought about uploading (using axios or something similar) all the files to the server side whenever the user finishes a "file upload" step. Since the user can go back to previous steps of the form and possibly remove some files already sent to the server, I will need to create a delete logic on the server side, so these changes are reflected.
I am looking for a way to keep the current behavior (send all the data to the server at once) but could not find a helpful link on the web. Is this even possible? Can someone suggest me something?
Add state to the parent component that houses all the form steps and then store all of the form data in local state. Once you are ready to submit, use the state values to submit.
You can store a file in react state just like you would any other form input. The file will be a variable obtained from event.target.files