File input accept attribute - is it useful

Question

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  lt input type  file      gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt input type  hidden  name  MAX FILE SIZE  value  100000  gt  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

User · Answer

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  lt input type  hidden  name  MAX FILE SIZE  value  100000  gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt input type  hidden  name  MAX FILE SIZE  value  100000  gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  quot  jpeg   jpg   jpe   jfif   jif quot   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

User · Answer

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  quot  jpeg   jpg   jpe   jfif   jif quot   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

User · Answer

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    x000D   x000D  h1   font-size  1em  margin 1em 0    x000D  h1   h1   border-top  1px solid  ccc  padding-top  1em    x000D   lt h1 gt Match all image files  image    lt  h1 gt  x000D   lt p gt  lt label gt image    lt input type  file  accept  image    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all video files  video    lt  h1 gt  x000D   lt p gt  lt label gt video    lt input type  file  accept  video    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all audio files  audio    lt  h1 gt  x000D   lt p gt  lt label gt audio    lt input type  file  accept  audio    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all image files  image    and files with the extension   someext  lt  h1 gt  x000D   lt p gt  lt label gt  someext image    lt input type  file  accept   someext image    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all image files  image    and video files  video    lt  h1 gt  x000D   lt p gt  lt label gt image   video    lt input type  file  accept  image   video    gt  lt  label gt  lt  p gt  x000D   x000D   x000D    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

User · Answer

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  lt input type  hidden  name  MAX FILE SIZE  value  100000  gt  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

User · Answer

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    x000D   x000D  h1   font-size  1em  margin 1em 0    x000D  h1   h1   border-top  1px solid  ccc  padding-top  1em    x000D   lt h1 gt Match all image files  image    lt  h1 gt  x000D   lt p gt  lt label gt image    lt input type  file  accept  image    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all video files  video    lt  h1 gt  x000D   lt p gt  lt label gt video    lt input type  file  accept  video    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all audio files  audio    lt  h1 gt  x000D   lt p gt  lt label gt audio    lt input type  file  accept  audio    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all image files  image    and files with the extension   someext  lt  h1 gt  x000D   lt p gt  lt label gt  someext image    lt input type  file  accept   someext image    gt  lt  label gt  lt  p gt  x000D   x000D   lt h1 gt Match all image files  image    and video files  video    lt  h1 gt  x000D   lt p gt  lt label gt image   video    lt input type  file  accept  image   video    gt  lt  label gt  lt  p gt  x000D   x000D   x000D    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

[html] File input 'accept' attribute - is it useful?

Examples related to html

Examples related to filter

Examples related to cross-browser

Examples related to mime-types