Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add reference to hx-preserve to the example at "Preserving File Inputs after Form Errors" #2474

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add reference to hx-preserve to the example at "Preserving File Inputs after Form Errors" #2474

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 10 additions & 1 deletion www/content/examples/file-upload-input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,16 @@ template = "demo.html"

When using server-side error handling and validation with forms that include both primitive values and file inputs, the file input's value is lost when the form returns with error messages. Consequently, users are required to re-upload the file, resulting in a less user-friendly experience.

To overcome the problem of losing file input value in simple cases, you can adopt the following approach:
To overcome the problem of losing the file input value, you can use the `hx-preserve` attribute on the input element:

```html
<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
<input hx-preserve id="someId" type="file" name="binaryFile">
<button type="submit">Submit</button>
</form>
```

Alternatively, you can restructure the form so that the file input is located outside the area that will be swapped.

Before:

Expand Down