A file input with multiple lets a person select more than one file under one field name. It does not set a maximum count, total byte limit, or safe content type.
Make this comfortable
HTML multiple file input: accept several files without inventing a limit
Use the contract
A damage report may need up to three photographs. The label states that policy, and the picker hints at JPEG and PNG files. The form uses multipart encoding so file bodies can be sent. Each selected file remains an individual item associated with the field; the server must iterate over them rather than expect one filename string. Required means that the selection cannot be empty for native constraint validation. It does not mean exactly three files. If the reviewer selects four, the server must return a clear error and preserve the other entered fields where policy permits.
<form action="/damage-reports/47/photos" method="post" enctype="multipart/form-data">
<label for="damage-photos">Damage photographs (up to three)</label>
<input id="damage-photos" name="damage_photos" type="file"
accept="image/jpeg,image/png" multiple required>
<button type="submit">Attach photographs</button>
</form>Behavior and cost
The picker may filter files according to accept, but the selected bytes still need inspection. Limit individual and aggregate size before decoding, verify actual format, assign server-owned storage names, and authorize attachment to the report. File transfer and image processing dominate the cost; the HTML attribute itself is cheap. On mobile devices, selection behavior varies, so test one file, several files, cancellation, and an over-limit submission. The shown action path is illustrative until an authenticated upload service exists.
Common Mistakes
- Do not treat multiple as a three-file cap.
- Do not trust a filename, extension, or client-supplied media type as proof of image content.
- Do not omit multipart encoding when the form submits file bodies.
Connected lessons
html