Multi-page form with file uploads

[roland-d]

Hi,

I would like to pick some brains :)

We are running Formie with a multi-page setup. The setup is fairly simple I would say:

• Page 1: Enter your details and upload an image
• Page 2: The summary page

When a user fills in the details, uploads an image and goes to the summary page and completes the form all is well. However when a user clicks on the button to go back to the details page because they need to change something they cannot go to the summary page because the file upload field is empty.

A similar issue we have on the same site but different form. Formie uploads the image to the server but when the user confirms the submission, the attached image is removed because the file upload field is empty when the final submission is posted. In the submissions I see the uploaded image until the form is confirmed.

How to deal properly with file uploads and multi-pages?

We had no problems with this until we moved from Formie 2.1.49 to Formie 3.1.4 and Craft 4 to Craft 5

I forgot to say that we are using AJAX as submission method.

Any help is appreciated.

[roland-d]

Just an update from my side, this has been worked around for now by hooking into the onBeforeFormieSubmit trigger and populate the File upload field with the content that was first submitted. Only downside is that the uploaded file will be uploaded again and again, depending how often you go back. That is something we can live with.

[engram-design]

Yep, it's a known issue, and just due to the fact you can't pre-populate a <input type="file"> element in HTML. We also need to remove the files once uploaded, to prevent them uploading again.

But indeed, it's not a great UX for ajax forms. Page reload forms should show a note with the files that have been uploaded at least.

The second scenario shouldn't happen, as it should detect that the file has been already uploaded and exists, so that seems odd.