HTML File Upload: The file Input Type

Use type="file" to let visitors choose a file from their device.

index.html

HTML

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

Three things to remember

The form needs method="post".
The form needs enctype="multipart/form-data". Without it, only the file name is sent, not the file.
A server must receive and store the file.

Helpful attributes

Attribute	Purpose
`accept`	Suggests file types: `image/*`, `.pdf`, `image/png`
`multiple`	Allows several files
`capture`	On phones, asks for the camera

index.html

HTML

<input type="file" name="photos" accept="image/png, image/jpeg" multiple>

info

accept is a hint, not a rule

Visitors can still pick other file types, and anyone can bypass the browser. The server must check the type, size and content of every upload before using it.

warning

Forgetting enctype

If the upload arrives empty on the server, check enctype="multipart/form-data" on the form.