diff --git a/www/content/examples/file-upload-input.md b/www/content/examples/file-upload-input.md index 3af1a2e2..f37b387a 100644 --- a/www/content/examples/file-upload-input.md +++ b/www/content/examples/file-upload-input.md @@ -5,7 +5,19 @@ 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 +
+ + + +
+``` + +If the file field is returned with errors on it, they will be displayed provided that `hx-preserve` was placed in the `input` only and not the element that would show the errors (e.g. `ol.errorlist`). If in a given circumstance you want the file upload input to return *without* preserving the user's chosen file (for example, because the file was an invalid type), you can manage that on the server side by omitting the `hx-preserve` attribute when the field has the relevant errors. + +Alternatively, you can preserve file inputs after form errors by restructuring the form so that the file input is located outside the area that will be swapped. Before: