input type file limit selectable files by extensions

Question

How can someone limit the files that can be selected with the input type  file  element by extensions   I already know the accept attribute  but in chrome it does limit the files by the last MIME Type defined  in this case  gif   and FF4 does not even limit anything    lt input type  file  accept  image jpg  image gif  gt    Am I doing anything wrong or is there another way

User · Accepted Answer

Honestly  the best way to limit files is on the server side  People can spoof file type on the client so taking in the full file name at server transfer time  parsing out the file type  and then returning a message is usually the best bet

User · Answer

function uploadFile          var fileElement   document getElementById  quot fileToUpload quot            var fileExtension    quot  quot           if  fileElement value lastIndexOf  quot   quot    gt  0                fileExtension   fileElement value substring fileElement value lastIndexOf  quot   quot     1  fileElement value length                     if  fileExtension     quot odx-d quot   fileExtension     quot odx quot   fileExtension     quot pdx quot   fileExtension     quot cmo quot   fileExtension     quot xml quot              var fd   new FormData            fd append  quot fileToUpload quot   document getElementById  fileToUpload   files 0            var xhr   new XMLHttpRequest            xhr upload addEventListener  quot progress quot   uploadProgress  false           xhr addEventListener  quot load quot   uploadComplete  false           xhr addEventListener  quot error quot   uploadFailed  false           xhr addEventListener  quot abort quot   uploadCanceled  false           xhr open  quot POST quot    quot  post uploadReq quot            xhr send fd                     else               alert  quot You must select a valid odx pdx xml or cmo file for upload quot                return false                             tried this   works very well

User · Answer

Easy way of doing it would be    lt input type  file  accept   gif  jpg  jpeg  png  doc  docx  gt    Works with all browsers  except IE9  I haven t tested it in IE10

User · Answer

NOTE  This answer is from 2011  It was a really good answer back then  but as of 2015  native HTML properties are supported by most browsers  so there s  usually  no need to implement such custom logic in JS  See Edi s answer and the docs     Before the file is uploaded  you can check the file s extension using Javascript  and prevent the form being submitted if it doesn t match  The name of the file to be uploaded is stored in the  value  field of the form element   Here s a simple example that only allows files that end in   gif  to be uploaded    lt script type  text javascript  gt      function checkFile             var fileElement   document getElementById  uploadFile            var fileExtension               if  fileElement value lastIndexOf       gt  0                fileExtension   fileElement value substring fileElement value lastIndexOf        1  fileElement value length                     if  fileExtension toLowerCase       gif                 return true                    else               alert  You must select a GIF file for upload                return false                   lt  script gt    lt form action  upload aspx  enctype  multipart form-data  onsubmit  return checkFile     gt       lt input name  uploadFile  id  uploadFile  type  file    gt        lt input type  submit    gt   lt  form gt    However  this method is not foolproof  Sean Haddy is correct that you always want to check on the server side  because users can defeat your Javascript checking by turning off javascript  or editing your code after it arrives in their browser  Definitely check server-side in addition to the client-side check  Also I recommend checking for size server-side too  so that users don t crash your server with a 2 GB file  there s no way that I know of to check file size on the client side without using Flash or a Java applet or something     However  checking client side before hand using the method I ve given here is still useful  because it can prevent mistakes and is a minor deterrent to non-serious mischief

[html] <input type="file"> limit selectable files by extensions

Examples related to html

Examples related to input-type-file