370

Implementing a file upload under html is fairly simple, but I just noticed that there is an 'accept' attribute that can be added to the <input type="file" ...> tag.

Is this attribute useful as a way of limiting file uploads to images, etc? What is the best way to use it?

Alternatively, is there a way to limit file types, preferably in the file dialog, for an html file input tag?

Christophe Roussy
  • 16,299
  • 4
  • 85
  • 85
Darren Oster
  • 9,146
  • 10
  • 48
  • 66
  • 2
    Regarding the Li Huan's reply, the right link to w3school is: http://www.w3schools.com/TAGS/att_input_accept.asp – PixEye Dec 21 '11 at 16:02
  • 2
    I've just tried using 'accept=application/x-gzip' and it worked with 'Chrome 19.0.1084.52', but does nothing in 'FF 13.0' and 'IE 8.0.6001'. – Jeach Jun 14 '12 at 19:26
  • Check out https://jsfiddle.net/jhfrench/cukjxnp6/embedded/result/ for a way to enhance `input type="file"` to validate that only `accept`ed file types can be chosen. – Jeromy French Dec 23 '15 at 23:07
  • 1
    For me, `accept="application/pdf,image/*"` working fine in desktop browser but not working in mobile browser (chrome). – manojadams Feb 17 '23 at 13:12

8 Answers8

471

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.

Usage

Note: These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.

h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }
<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

From the HTML Specification (source)

The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.

If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:

The string audio/*

  • Indicates that sound files are accepted.

The string video/*

  • Indicates that video files are accepted.

The string image/*

  • Indicates that image files are accepted.

A valid MIME type with no parameters

  • Indicates that files of the specified type are accepted.

A string whose first character is a U+002E FULL STOP character (.)

  • Indicates that files with the specified file extension are accepted.
rollstuhlfahrer
  • 3,988
  • 9
  • 25
  • 38
0b10011
  • 18,397
  • 4
  • 65
  • 86
  • 74
    I needed to accept JPG, PNG, GIF, PDF, and EPS files, but `accept='.jpg,.png,.gif,.pdf,.eps'` didn't allow any selection. I tried many variations - space delimited, no dot characters, etc., but no dice in Chrome v20, so I ended up using the mime types and it worked great: `accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'` – Charlie Schliesser Jun 27 '12 at 16:49
  • 8
    I can only get the above to work in Chrome. In Firefox 13 I can't get any multiple file type to work (comma separated or otherwise) aside from doing a single wildcard type like `image/*`. Bummer. – Charlie Schliesser Jun 27 '12 at 17:31
  • 2
    @CharlieS, yes, as mentioned in my answer, the examples are taken from the *specification* and may not actually work in any browsers. However, it is something in the works and there's a good chance these features will be coming to browsers in the future (although they may be removed from the specification before they are implemented). – 0b10011 Jun 27 '12 at 18:00
  • 3
    For example, Internet Explorer 9 does not care about the accept attribute - I've tried the demo and it always displays `*.*` as file mask. – Matt Apr 04 '13 at 12:32
  • 4
    According to the spec: `Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.` Just mime types. No extensions. It's up to the client to determine mime type. – Rudie Aug 31 '13 at 13:48
  • 8
    I'm not sure where you're getting your information, but in the spec I linked to in the answer, this is listed as perfectly valid: `A string whose first character is a U+002E FULL STOP character (.) -- Indicates that files with the specified file extension are accepted.` – 0b10011 Aug 31 '13 at 15:57
  • 5
    `video/*` means you can't upload mp4 in Safari, you'll also need to specify `video/mp4` – Kit Sunde Dec 10 '13 at 02:04
  • I needed to accept some pictures extensions, including JPG, JPEG, BMP and PNG. I have to use : `accept = "image/png|jpe?g|bmp"` to accept both JPG and JPEG (it fired an error with `jpg|jpeg`). If it could help someone... – AlexB Mar 31 '15 at 08:53
  • 2
    if you want to user specific mimetypes other than the ones mentioned, you can go here: http://www.freeformatter.com/mime-types-list.html – bonbon.langes Jun 19 '15 at 13:19
  • Safari 9.1 seems to work *only* with Mime types, not with dot types – Dmitry Gonchar Apr 11 '16 at 11:49
  • 2
    Please understand that in a mobile browser context, the `accept` attribute has extremely unreliable support - and in fact has been dropped in some latest releases as well. Do not rely it on it for your app's mobile needs (ref: https://caniuse.com/#search=accept) – Hassan Baig Apr 30 '18 at 11:22
107

Yes, it is extremely useful in browsers that support it, but the "limiting" is as a convenience to users (so they are not overwhelmed with irrelevant files) rather than as a way to prevent them from uploading things you don't want them uploading.

It is supported in

  • Chrome 16 +
  • Safari 6 +
  • Firefox 9 +
  • IE 10 +
  • Opera 11 +

Here is a list of content types you can use with it, followed by the corresponding file extensions (though of course you can use any file extension):

application/envoy   evy
application/fractals    fif
application/futuresplash    spl
application/hta hta
application/internet-property-stream    acx
application/mac-binhex40    hqx
application/msword  doc
application/msword  dot
application/octet-stream    *
application/octet-stream    bin
application/octet-stream    class
application/octet-stream    dms
application/octet-stream    exe
application/octet-stream    lha
application/octet-stream    lzh
application/oda oda
application/olescript   axs
application/pdf pdf
application/pics-rules  prf
application/pkcs10  p10
application/pkix-crl    crl
application/postscript  ai
application/postscript  eps
application/postscript  ps
application/rtf rtf
application/set-payment-initiation  setpay
application/set-registration-initiation setreg
application/vnd.ms-excel    xla
application/vnd.ms-excel    xlc
application/vnd.ms-excel    xlm
application/vnd.ms-excel    xls
application/vnd.ms-excel    xlt
application/vnd.ms-excel    xlw
application/vnd.ms-outlook  msg
application/vnd.ms-pkicertstore sst
application/vnd.ms-pkiseccat    cat
application/vnd.ms-pkistl   stl
application/vnd.ms-powerpoint   pot
application/vnd.ms-powerpoint   pps
application/vnd.ms-powerpoint   ppt
application/vnd.ms-project  mpp
application/vnd.ms-works    wcm
application/vnd.ms-works    wdb
application/vnd.ms-works    wks
application/vnd.ms-works    wps
application/winhlp  hlp
application/x-bcpio bcpio
application/x-cdf   cdf
application/x-compress  z
application/x-compressed    tgz
application/x-cpio  cpio
application/x-csh   csh
application/x-director  dcr
application/x-director  dir
application/x-director  dxr
application/x-dvi   dvi
application/x-gtar  gtar
application/x-gzip  gz
application/x-hdf   hdf
application/x-internet-signup   ins
application/x-internet-signup   isp
application/x-iphone    iii
application/x-javascript    js
application/x-latex latex
application/x-msaccess  mdb
application/x-mscardfile    crd
application/x-msclip    clp
application/x-msdownload    dll
application/x-msmediaview   m13
application/x-msmediaview   m14
application/x-msmediaview   mvb
application/x-msmetafile    wmf
application/x-msmoney   mny
application/x-mspublisher   pub
application/x-msschedule    scd
application/x-msterminal    trm
application/x-mswrite   wri
application/x-netcdf    cdf
application/x-netcdf    nc
application/x-perfmon   pma
application/x-perfmon   pmc
application/x-perfmon   pml
application/x-perfmon   pmr
application/x-perfmon   pmw
application/x-pkcs12    p12
application/x-pkcs12    pfx
application/x-pkcs7-certificates    p7b
application/x-pkcs7-certificates    spc
application/x-pkcs7-certreqresp p7r
application/x-pkcs7-mime    p7c
application/x-pkcs7-mime    p7m
application/x-pkcs7-signature   p7s
application/x-sh    sh
application/x-shar  shar
application/x-shockwave-flash   swf
application/x-stuffit   sit
application/x-sv4cpio   sv4cpio
application/x-sv4crc    sv4crc
application/x-tar   tar
application/x-tcl   tcl
application/x-tex   tex
application/x-texinfo   texi
application/x-texinfo   texinfo
application/x-troff roff
application/x-troff t
application/x-troff tr
application/x-troff-man man
application/x-troff-me  me
application/x-troff-ms  ms
application/x-ustar ustar
application/x-wais-source   src
application/x-x509-ca-cert  cer
application/x-x509-ca-cert  crt
application/x-x509-ca-cert  der
application/ynd.ms-pkipko   pko
application/zip zip
audio/basic au
audio/basic snd
audio/mid   mid
audio/mid   rmi
audio/mpeg  mp3
audio/x-aiff    aif
audio/x-aiff    aifc
audio/x-aiff    aiff
audio/x-mpegurl m3u
audio/x-pn-realaudio    ra
audio/x-pn-realaudio    ram
audio/x-wav wav
image/bmp   bmp
image/cis-cod   cod
image/gif   gif
image/ief   ief
image/jpeg  jpe
image/jpeg  jpeg
image/jpeg  jpg
image/pipeg jfif
image/svg+xml   svg
image/tiff  tif
image/tiff  tiff
image/x-cmu-raster  ras
image/x-cmx cmx
image/x-icon    ico
image/x-portable-anymap pnm
image/x-portable-bitmap pbm
image/x-portable-graymap    pgm
image/x-portable-pixmap ppm
image/x-rgb rgb
image/x-xbitmap xbm
image/x-xpixmap xpm
image/x-xwindowdump xwd
message/rfc822  mht
message/rfc822  mhtml
message/rfc822  nws
text/css    css
text/h323   323
text/html   htm
text/html   html
text/html   stm
text/iuls   uls
text/plain  bas
text/plain  c
text/plain  h
text/plain  txt
text/richtext   rtx
text/scriptlet  sct
text/tab-separated-values   tsv
text/webviewhtml    htt
text/x-component    htc
text/x-setext   etx
text/x-vcard    vcf
video/mpeg  mp2
video/mpeg  mpa
video/mpeg  mpe
video/mpeg  mpeg
video/mpeg  mpg
video/mpeg  mpv2
video/quicktime mov
video/quicktime qt
video/x-la-asf  lsf
video/x-la-asf  lsx
video/x-ms-asf  asf
video/x-ms-asf  asr
video/x-ms-asf  asx
video/x-msvideo avi
video/x-sgi-movie   movie
x-world/x-vrml  flr
x-world/x-vrml  vrml
x-world/x-vrml  wrl
x-world/x-vrml  wrz
x-world/x-vrml  xaf
x-world/x-vrml  xof
iconoclast
  • 21,213
  • 15
  • 102
  • 138
  • I don't see anything for fonts, such as application/font-woff or application/x-font-ttf. – Triynko Dec 14 '15 at 15:46
  • @Triynko I have the same problem, but I see that, e.g. Chrome, uploads a ttf font as "application/octet-stream" so this can't be used in a file-input element... – estani Sep 18 '19 at 09:00
  • 1
    Just find out that accept may also use file suffixes! so `accept=".ttf"` works as expected. – estani Sep 18 '19 at 09:07
46

In 2015 the only way I found to make it work for both Chrome and Firefox is to put all possible extensions you want to support, including variants (including the dot in front !):

accept=".jpeg, .jpg, .jpe, .jfif, .jif"

Problem with Firefox: Using the image/jpeg mime type Firefox will only show .jpg files, very strange as if the common .jpeg was not ok...

Whatever you do, be sure to try with files having many different extensions. Maybe it even depends on the OS ... I suppose accept is case insensitive, but maybe not in every browser.

Here is the MDN docs about accept:

accept If the value of the type attribute is file, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers:

    A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
    A valid MIME type with no extensions.
    audio/* representing sound files. HTML5
    video/* representing video files. HTML5
    image/* representing image files. HTML5
Christophe Roussy
  • 16,299
  • 4
  • 85
  • 85
35

Accept attribute was introduced in the RFC 1867, intending to enable file-type filtering based on MIME type for the file-select control. But as of 2008, most, if not all, browsers make no use of this attribute. Using client-side scripting, you can make a sort of extension based validation, for submit data of correct type (extension).

Other solutions for advanced file uploading require Flash movies like SWFUpload or Java Applets like JUpload.

Community
  • 1
  • 1
Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
  • 5
    According to Wikipedia (http://en.wikipedia.org/wiki/File_select#Accept_attribute_has_no_effect), Opera seems to be the only browser supporting it. It's a big shame, really. – Zecc Dec 01 '10 at 12:12
  • 4
    chrome appears to use it. it probably found its way into webkit – yincrash Feb 10 '11 at 22:27
  • Android Honeycomb and ICS support it. – greyfade Jan 23 '12 at 23:06
  • The `accept` attribute is part of the HTML5 spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#attr-input-accept – Mathias Bynens Feb 16 '12 at 13:34
  • 9
    "The accept attribute is currently supported by Opera 11+, Chrome 16+ and Firefox 9+ only." From: http://en.wikipedia.org/wiki/File_select#Accept_attribute_support – Simon Mar 11 '12 at 14:40
  • 6
    IE 10+ supports the accept attribute. It was the last straggler not to. – sj26 Jun 01 '12 at 05:48
  • Sorry guys, I haven't updated this answer since 2008 (whoa, almost 4 years). I'll update it as soon as possible... – Christian C. Salvadó Jun 01 '12 at 08:19
  • 1
    The correct answer is the newer one by @bfrohs -- MIME types: http://www.iana.org/assignments/media-types – juanmirocks Jan 23 '13 at 17:18
28

It is supported by Chrome. It's not supposed to be used for validation, but for type hinting the OS. If you have an accept="image/jpeg" attribute in a file upload the OS can only show files of the suggested type.

magikMaker
  • 289
  • 3
  • 2
12

It's been a few years, and Chrome at least makes use of this attribute. This attribute is very useful from a usability standpoint as it will filter out the unnecessary files for the user, making their experience smoother. However, the user can still select "all files" from the type (or otherwise bypass the filter), thus you should always validate the file where it is actually used; If you're using it on the server, validate it there before using it. The user can always bypass any client-side scripting.

Kevin Fee
  • 495
  • 4
  • 17
6

If the browser uses this attribute, it is only as an help for the user, so he won't upload a multi-megabyte file just to see it rejected by the server...
Same for the <input type="hidden" name="MAX_FILE_SIZE" value="100000"> tag: if the browser uses it, it won't send the file but an error resulting in UPLOAD_ERR_FORM_SIZE (2) error in PHP (not sure how it is handled in other languages).
Note these are helps for the user. Of course, the server must always check the type and size of the file on its end: it is easy to tamper with these values on the client side.

PhiLho
  • 40,535
  • 6
  • 96
  • 134
0

Back in 2008 this wasn't important because of the lack of mobile OS'es but now quite important thing.

When you set accepted mime types, then in for example Android user is given system dialog with apps which can provide him the content of mime which file input accepts, what is great because navigating through files in file explorer on mobile devices is slow and often stressful.

One important thing is that some mobile browsers (based on Android version of Chrome 36 and Chrome Beta 37) does not support app filtering over extension(s) and multiple mime types.

Jakub Mendyk
  • 428
  • 2
  • 6
  • 14