HTML file input: safe, focused uploads
The HTML <input type="file"> lets users choose files from their device for upload. It integrates with platform pickers and supports multiple selection, camera capture on mobile, and MIME filtering. A thoughtful configuration reduces confusion and protects your servers from unexpected content.
Limit types with accept
Use the accept attribute to hint which files are allowed (e.g., image/*, .pdf, video/mp4). This filters the picker UI and prevents many mistakes, but always verify file type on the server since extensions can be spoofed.
Multiple & capture
multiple: allow selecting more than one file.capture: on mobile, request camera/microphone input for supported types.
Security basics
Never trust client metadata alone. On the server, check MIME type and magic bytes, limit file size, scan uploads if required, and store outside the web root. Generate unique filenames to prevent collisions and path traversal. Strip EXIF data when privacy matters.
Accessibility
- Use a visible label like “Upload resume”.
- Announce selected file names in text near the control.
- Keep the default button accessible; avoid reinventing it unless necessary.
Copy‑ready patterns
- Avatar upload:
accept="image/*", helper text for size and aspect ratio. - PDF only:
accept=".pdf,application/pdf", server verification mandatory. - Gallery:
multiplewith preview thumbnails after selection.
File uploads are powerful but risky. Keep the client simple, guide users with clear labels and filters, and enforce strict checks on the server to accept only what you expect.