Uploading Files

To allow users to upload files to your website, use the input element with type="file". Importantly, your form must also have the enctype="multipart/form-data" attribute.

File uploads are essential for many applications, whether it's letting a user upload a profile picture, submit a resume, or attach evidence to a support ticket. To handle file data, the browser needs specific instructions on how to encode the form submission.

The Important Form Attributes

Normally, forms send simple text data. When you want to send a complex file (like an image or PDF), you must tell the browser to break the data into multiple parts. You do this by setting the enctype attribute on the form tag. Also, the form method must be post:

The File Input

To create the actual "Browse..." button that opens the operating system's file selector, use the file input type:

Limiting File Types and Multiple Files

You can enhance the user experience by adding a couple of helpful attributes to your file input:

• accept: This tells the file selector to only show specific file extensions (like .pdf, .png) or file categories (like image/* for any image). Note that this is a helpful filter, not a bulletproof security measure (you should still validate files on the server).
• multiple: If you add this attribute, the user can select more than one file at a time by holding down the Ctrl or Cmd key.

Full Working Example

The following example demonstrates a form prepared to accept both a specific document type and multiple image files: