[LiveForm] Files cleared when form error

[akyoscommunication]

When submitting a form with a Live Component (live action), if there is an error, we get a 422 response code because the entity is not valid. That’s expected. However, if the form contains a file input, the live_controller.js script clears the submitted files, preventing the user from reselecting them because they are not in the next requests anymore.

We found these three lines (2123-2125), and when commented out, the issue disappears:

for (const input of Object.values(this.pendingFiles)) { input.value = ''; }

We’re not sure if this is a bug or if it serves another purpose. In any case, resetting the form manually isn't necessary because we already call resetForm() in the Live Action, which clears the files.

[smnandre]

I think it mimics here the behaviour of the browser that reset file inputs on submit

[akyoscommunication]

I understand, but it's not user-friendly to lose the uploaded file if there's an error on the form. There's no other choice when the page refreshes because you can't walk the file through the request and then put it back in the file input after reloading. Here, in the context of a live component with a page that doesn't refresh, we can offer a more practical solution, as long as we don't empty the form. The expected behavior here is : on form submit in a live component, if there is an error on a field when submitting, the component will re-render but the data will remain in the fields, including the files.

We've patched the live_controller.js commenting on these 3 lines and everything seems to be working as expected.

[smnandre]

Could you open a PR with these changes, covered by a test or two ?