A file input allows someone to choose at least one file from their device, in order to submit it as part of a form.

Only accepts one file at a time
or drag and drop here
Choose as many files as you feel like!
or drag and drop here
Also known as:
  • File picker
  • File upload / uploader
  • File selector
  • File importer
  • Dropzone

Content guidelines

Be clear about requirements

Requirements of file inputs can be particularly hard for users to anticipate, compared to something like a text box. Whatever requirements your file input has, be upfront about them—don't leave it up to your users to choose some files and see what happens.

or drag and drop here
Don't
Must be a PDF
or drag and drop here
Do
Both of these file inputs accept only PDFs. But it might be a surprise in the first case.

Be generous with file type requirements

Common use cases for file inputs include text data, tabular data or spreadsheets, and images. But these can come in many, many formats:

  • text: TXT, RTF, DOC, DOCX, ODF, PAGES...
  • spreadsheets: CSV, TSV, ODS, XLS, XLSX, XLSM, XLSB, NUMBERS...
  • images: JPG, PNG, GIF, BMP, HEIC, SVG, WEBP, TIFF, PSD, AI...

Whenever possible, let the user provide whatever they have on hand, and have your application take on the responsibility of interpreting it.

Must be a PDF
or drag and drop here
Don't
Can be a PDF, or any image file
or drag and drop here
Do

Be generous with file size requirements

Users may not always have the expertise, the tools, or simply the time or patience, to manipulate the files they're trying to upload.

Whenever possible, let the user provide whatever they have on hand, and have your application take on the responsibility of resizing or compressing it to meet your needs.

If there technically needs to be a file size limit, but it's really, really high, don't worry about including it in the help text.

Can be PDFs, or any type of image file. Must each be less than 10 MB
or drag and drop here
Don't
Can be PDFs, or any type of image file
or drag and drop here
Do

In the first example: if one of the user's receipt images is 10.1 MB, should we really reject it?

The second example secretly has a file size limit of 64 GB. You won't know though unless you actually try to drop in a file that big, and that's OK.