Add reference to hx-preserve to the example at "Preserving File Inputs after Form Errors" #2474
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
I have added a second approach to preserving file inputs after form errors (in the example at file-upload-input.md), using
hx-preserve
.The approach currently suggested requires a restructuring of the form that will not always be feasible or convenient. I have found that adding
hx-preserve
to the file inputcauses the expected behavior: the user does not have to choose a file again before
re-submitting the form.
The approach is:
I feel this change is necessary because the current version of file-upload-input.md
leaves the impression that there is no htmx attribute that can preserve the file input's
value if the input is within the area that htmx will swap. I'm a little
embarrassed to say that this is the conclusion I drew when I saw the current version of
file-upload-input.md and I charged ahead and made an extension that moved my input out
of the swap zone and put it back after the swap. My bad. But it might help others to
point out that
hx-preserve
is available for this use case.Testing
My own testing on the
hx-preserve
approach shows it can acheive the following behaviour:if the form has errors and is returned, the original file input choice is preserved
and the form can be successfully re-submitted.
if the file field has errors on it, they will be displayed provided that
hx-preserve
wasplaced in the
input
only and not the errors element (e.g.ol.errorlist
)if you want the file upload input to return without the user's chosen file
because the field was invalid, you can manage that on the server side by omitting
the
hx-preserve
attribute when the field has errors. (For example, if the userchooses an invalid file type, you may want the file field to come back with no
value so the user is forced to make another choice.)
Checklist
master
for website changes,dev
forsource changes)
master
branch. Sorry if that didn't work!approved via an issue
npm run test
) and verified that it succeededwww
.