Limit file format when using input type file

Question

I d like to restrict the type of file that can be chosen from the native OS file chooser when the user clicks the Browse button in the  lt input type  file  gt  element in HTML  I have a feeling it s impossible  but I d like to know if there is a solution  I d like to keep solely to HTML and JavaScript  no Flash please

User · Answer

I may suggest following    If you have to make user select any of image files by default  the use accept  image      lt input type  file  accept  image      gt  if you want to restrict to specific image types then use accept  image bmp  image jpeg  image png    lt input type  file  accept  image bmp  image jpeg  image png    gt  if you want to restrict to specific types then use accept   bmp   doc   pdf    lt input type  file  accept   bmp   doc   pdf    gt  You cannot restrict user to change file filer to all files  so always validate file type in script and server

User · Answer

I know this is a bit late   function Validatebodypanelbumper theForm       var regexp     var extension       theForm FileUpload value substr theForm FileUpload1 value lastIndexOf           if   extension toLowerCase        gif    amp  amp          extension toLowerCase        jpg    amp  amp          extension                    alert  The   FileUpload   field contains an unapproved filename           theForm FileUpload1 focus          return false          return true

User · Answer

As mentioned in previous answers we cannot restrict user to select files for only given file formats  But it s really handy to use the accept tag on file attribute in html    As for validation  we have to do it at the server side  We can also do it at client side in js but its not a foolproof solution  We must validate at server side   For these requirements I really prefer struts2 Java web application development framework  With its built-in file upload feature  uploading files to struts2 based web apps is a piece of cake  Just mention the file formats that we would like to accept in our application and all the rest is taken care of by the core of framework itself  You can check it out at struts official site

User · Answer

Technically you can specify the accept attribute  alternative in html5  on the input element  but it s not properly supported

User · Answer

Use input tag with accept attribute   lt input type  file  name  my-image  id  image  accept  image gif  image jpeg  image png    gt    Click here for the latest browser compatibility table   Live demo here  To select only image files  you can use this accept  image      lt input type  file  name  my-image  id  image  accept  image      gt    Live demo here   Only gif  jpg and png will be shown  screen grab from Chrome version 44

User · Answer

You can use the change event to monitor what the user selects and notify them at that point that the file is not acceptable  It does not limit the actual list of files displayed  but it is the closest you can do client-side  besides the poorly supported accept attribute    x000D   x000D  var file   document getElementById  someId    x000D   x000D  file onchange   function e    x000D    var ext   this value match                1   x000D    switch  ext    x000D      case  jpg   x000D      case  bmp   x000D      case  png   x000D      case  tif   x000D        alert  Allowed    x000D        break  x000D      default  x000D        alert  Not allowed    x000D        this value       x000D      x000D     x000D   lt input type  file  id  someId    gt  x000D   x000D   x000D    JSFiddle

User · Answer

Strictly speaking  the answer is no  A developer cannot prevent a user from uploading files of any type or extension But still  the accept attribute of  lt input type    quot file quot  gt  can help to provide a filter in the file select dialog box of the OS  For example   x000D   x000D   lt  --  IE 10   Edge  EdgeHTML   Edge  Chromium   Chrome  Firefox 42   -- gt   lt input type  file  accept   xls  xlsx    gt  x000D   x000D   x000D   should provide a way to filter out files other than  xls or  xlsx  Although the MDN page for input element always said that it supports this  to my surprise  this didn t work for me in Firefox until version 42  This works in IE 10   Edge  and Chrome  So  for supporting Firefox older than 42 along with IE 10   Edge  Chrome  and Opera  I guess it s better to use comma-separated list of MIME-types   x000D   x000D   lt  --  IE 10   Edge  EdgeHTML   Edge  Chromium   Chrome  Firefox  -- gt   lt input type  file   accept  application vnd openxmlformats-officedocument spreadsheetml sheet application vnd ms-excel    gt   x000D   x000D   x000D    Edge  EdgeHTML  behavior  The file type filter dropdown shows the file types mentioned here  but is not the default in the dropdown  The default filter is All files       You can also use asterisks in MIME-types  For example   x000D   x000D   lt input type  file  accept  image      gt   lt  -- all image types -- gt    lt input type  file  accept  audio      gt   lt  -- all audio types -- gt    lt input type  file  accept  video      gt   lt  -- all video types -- gt   x000D   x000D   x000D   W3C recommends authors to specify both MIME-types and corresponding extensions in the accept attribute  So  the best approach is   x000D   x000D   lt  -- Right approach  Use both file extensions and corresponding MIME-types  -- gt   lt  --  IE 10   Edge  EdgeHTML   Edge  Chromium   Chrome  Firefox  -- gt   lt input type  file   accept   xls  xlsx  application vnd openxmlformats-officedocument spreadsheetml sheet application vnd ms-excel    gt   x000D   x000D   x000D   JSFiddle of the same  here  Reference  List of MIME-types IMPORTANT  Using the accept attribute only provides a way of filtering in the files of types that are of interest  Browsers still allow users to choose files of any type  Additional  client-side  checks should be done  using JavaScript  one way would be this   and definitely file types MUST be verified on the server  using a combination of MIME-type using both the file extension and its binary signature  ASP NET  PHP  Ruby  Java   You might also want to refer to these tables for file types and their magic numbers  to perform a more robust server-side verification  Here are three good reads on file-uploads and security  EDIT   Maybe file type verification using its binary signature can also be done on client side using JavaScript  rather than just by looking at the extension  using HTML5 File API  but still  the file must be verified on the server  because a malicious user will still be able to upload files by making a custom HTTP request

User · Answer

You could actually do it with javascript but remember js is client side  so you would actually be  warning users  what type of files they can upload  if you want to AVOID  restrict or limit as you said  certain type of files you MUST do it server side   Look at this basic tut if you would like to get started with server side validation  For the whole tutorial visit this page   Good luck

User · Answer

Yes  you are right  It s impossible with HTML  User will be able to pick whatever file he she wants    You could write a piece of JavaScript code to avoid submitting a file based on its extension  But keep in mind that this by no means will prevent a malicious user to submit any file he she really wants to   Something like   function beforeSubmit         var fname   document getElementById  ifile   value         check if fname has the desired extension     if  fname hasDesiredExtension            return true        else           return false            HTML code    lt form method  post  onsubmit  return beforeSubmit     gt       lt input type  file  id  ifile  name  ifile   gt   lt  form gt

User · Answer

You can use  quot accept quot  attribute as a filter in the file select box  Using  quot accept quot  help you filter input files base on their  quot suffix quot  or their  quot meme type quot  1 Filter based on suffix  Here  quot accept quot  attribute just allow to select files with  jpeg extension   lt input type  quot file quot  accept  quot  jpeg quot    gt   2 Filter based on  quot file type quot  Here  quot accept quot  attribute just allow to select file with  quot image jpeg quot  type   lt input type  quot file quot  accept  quot image jpeg quot    gt   Important  We can change or delete the extension of a file  without changing the meme type  For example it is possible to have a file without extension  but the type of this file can be  quot image jpeg quot   So this file can not pass the  accept  quot  jpeg quot  filter  but it can pass accept  quot image jpeg quot   3 We can use   to select all kind of a file type  For example below code allow to select all kind of images  for example  quot image png quot  or  quot image jpeg quot  or       All of them are allowed   lt input type  quot file quot  accept  quot image   quot    gt    4 We can use cama        as an  quot or operator quot  in select attribute  For example to allow all kind of images or pdf files we can use this code   lt input type  quot file quot  accept  quot image     application pdf quot    gt

User · Answer

There is the accept attribute for the input tag  However  it is not reliable in any way  Browsers most likely treat it as a  suggestion   meaning the user will  depending on the file manager as well  have a pre-selection that only displays the desired types  They can still choose  all files  and upload any file they want   For example    x000D   x000D   lt form gt  x000D       lt input type  file  name  pic  id  pic  accept  image gif  image jpeg    gt  x000D   lt  form gt  x000D   x000D   x000D    Read more in the HTML5 spec  Keep in mind that it is only to be used as a  help  for the user to find the right files  Every user can send any request he she wants to your server  You always have to validated everything server-side   So the answer is  no you cannot restrict  but you can set a pre-selection but you cannot rely on it   Alternatively or additionally you can do something similar by checking the filename  value of the input field  with JavaScript  but this is nonsense because it provides no protection and also does not ease the selection for the user  It only potentially tricks a webmaster into thinking he she is protected and opens a security hole  It can be a pain in the ass for users that have alternative file extensions  for example jpeg instead of jpg   uppercase  or no file extensions whatsoever  as is common on Linux systems

[html] Limit file format when using <input type="file">?

Examples related to html

Examples related to file

Examples related to types