HTML file accept: guide the picker, validate the upload on the server

When it earns its place

An intake team attaches up to four scanned delivery slips as PDF files. The picker hint reduces accidental image uploads, while the visible help states the intended format and count. The server must enforce the limit, inspect actual content, cap bytes, and store files outside executable paths. A file with a PDF name can contain unexpected data, and a client can bypass the picker entirely. The form uses multipart encoding because binary files need a submission format that can carry them.

<form action="/intake/I-47/slips" method="post" enctype="multipart/form-data">
  <label for="delivery-slips">Delivery slips</label>
  <p id="slip-rules">Attach up to four PDF files, no more than 8 MB each.</p>
  <input id="delivery-slips" name="slips" type="file" accept=".pdf,application/pdf" multiple required aria-describedby="slip-rules">
  <button type="submit">Upload slips</button>
</form>

Browser boundary

Neither accept nor multiple imposes the four-file or size limit. The example route needs a real upload handler, authorization, and a safe storage policy before deployment.

Cost and maintenance

The picker hint adds no script. Server-side content inspection and storage are the real costs; skipping them turns a convenience attribute into a false security assumption.

Common Mistakes

• Do not trust the extension or client-declared media type.
• Do not assume accept blocks every unwanted selection.
• Do not omit multipart/form-data for a normal file-upload form.

Connected lessons

• HTML file upload forms: declare multipart encoding and bound the server
• HTML constraint validation: improve feedback without trusting the browser
• HTML form help: connect visible instructions and errors to a control

Continue with HTML multiple file input: accept several files without inventing a limit.

Continue with HTML file capture: suggest a camera without treating it as permission.