Module 11: Advanced HTML Forms and Validation
File Inputs and multipart/form-data
Create file-upload controls and understand how the browser encodes uploaded files.
A file input lets a visitor select files from their device. When a form uploads files, its enctype should normally be multipart/form-data.
<form action="/profile/photo/" method="post" enctype="multipart/form-data">
<label for="avatar">Profile photo</label>
<input id="avatar" name="avatar" type="file" accept="image/png,image/jpeg">
<button type="submit">Upload photo</button>
</form>
The accept attribute is a hint to the file picker. It can filter the types shown by some operating systems, but it does not validate the file’s contents. A malicious or incorrectly named file can still be selected or sent directly to the server.
The server should check file size, content type, actual file signature where appropriate, storage location, naming, and access permissions. Do not trust the original filename or the browser’s accept filter. Store uploads outside executable application paths when possible, and serve them with safe response headers.
The multiple attribute allows more than one file to be selected. Use it only if the server and interface support multiple uploads. Explain file type and size limits before the user chooses a file.