HTML: input type="file"

A file input lets a user choose one or more local files to send with a form.

What you will learn

How to label a file chooser
Why a file form needs multipart/form-data
Why file type, size, and content must be checked on the server

Minimal example

<form action="/upload" method="post"
      enctype="multipart/form-data">
  <label for="avatar">Profile image</label>
  <input id="avatar" name="avatar" type="file"
         accept="image/*">
  <button type="submit">Upload</button>
</form>

The encoding type allows the request to carry file data. accept can guide the file picker, but it does not enforce what a user or an attacker submits.

Common mistakes

Do not rely on the filename or accept to identify a safe file.
Check size, type, content, and authorization on the server before storing or processing an upload.
Explain whether the file will be retained and how it will be used.