HTML Input file Accept Attribute File Type CSV

Question

I have a file upload object on my page   lt input type  quot file quot  ID  quot fileSelect quot    gt   with the following excel files on my desktop    file1 xlsx file1 xls file csv   I want the file upload to ONLY show  xlsx   xls   amp   csv files  Using the accept attribute  I found these content-types took care of  xlsx  amp   xls extensions     accept  application vnd openxmlformats-officedocument spreadsheetml sheet   XLSX  accept  application vnd ms-excel   XLS   However  I cannot find the correct content-type for an Excel CSV file  Any suggestions  EXAMPLE  http   jsfiddle net LzLcZ

User · Answer

These days you can just use the file extension   lt input type  file  ID  fileSelect  accept   xlsx   xls   csv   gt

User · Answer

This didn t work for me under Safari 10    lt input type  file  accept   csv    gt    I had to write this instead    lt input type  file  accept  text csv    gt

User · Answer

After my test  on  macOS 10 15 7 Catalina   the answer of  Dom   Rikin Patel  cannot recognize the   xlsx  file normally  I personally summarized the practice of most of the existing answers and passed personal tests  Sum up the following answers   accept  quot  csv   xls   xlsx  text csv  application csv  text comma-separated-values  application csv  application excel  application vnd msexcel  text anytext  application vnd  ms-excel  application vnd openxmlformats-officedocument spreadsheetml sheet quot

User · Answer

I have used text comma-separated-values for CSV mime-type in accept attribute and it works fine in Opera  Tried text csv without luck   Some others MIME-Types for CSV if the suggested do not work     text comma-separated-values  text csv application csv application excel  application vnd ms-excel  application vnd msexcel text anytext   Source  http   filext com file-extension CSV

User · Answer

Dom this attribute is very old and not accepted in modern browsers as far as I know  But here is an alternative to it  Try this   lt script type  text javascript  language  javascript  gt  function checkfile sender        var validExts   new Array   xlsx     xls     csv        var fileExt   sender value      fileExt   fileExt substring fileExt lastIndexOf            if  validExts indexOf fileExt   lt  0          alert  Invalid file selected  valid files are of                    validExts toString       types           return false            else return true     lt  script gt    lt input type  file  id  file  onchange  checkfile this      gt    I guess it ll help you of course you can change this script according to your needs

User · Answer

In addition to the top-answer  CSV files  for example  are reported as text plain under macOS but as application vnd ms-excel under Windows  So I use this   lt input type  quot file quot  accept  quot text plain   csv  application vnd openxmlformats-officedocument spreadsheetml sheet  application vnd ms-excel quot    gt

User · Answer

You can know the correct content-type for any file by just doing the following   1  Select interested file    2  And run in console this   console log     file-input   0  files 0  type     You can also set attribute  multiple  for your input to check content-type for several files at a time and do next   for  var i   0  i  lt      file-input   0  files length  i         console log     file-input   0  files i  type       Attribute accept has some problems with multiple attribute and doesn t work correctly in this case

User · Answer

I have modified the solution of  yogi  The addition is that when the file is of incorrect format I reset the input element value   function checkFile sender  validExts        var fileExt   sender value      fileExt   fileExt substring fileExt lastIndexOf            if  validExts indexOf fileExt   lt  0  amp  amp  fileExt                  alert  Invalid file selected  valid files are of                      validExts toString       types               sender  val              return false            else return true      I have custom verification buildin  because in open file window the user can still choose the options  All files         regardless if I explicitly set the accept attribute in input element

User · Answer

Well this is embarrassing    I found the solution I was looking for and it couldn t be simpler  I used the following code to get the desired result  Hope this helps someone in the future   Thanks everyone for your help    lt input id  fileSelect  type  file  accept   csv  application vnd openxmlformats-officedocument spreadsheetml sheet  application vnd ms-excel    gt      Valid Accept Types   For CSV files   csv   use     lt input type  file  accept   csv    gt    For Excel Files 97-2003   xls   use     lt input type  file  accept  application vnd ms-excel    gt    For Excel Files 2007    xlsx   use     lt input type  file  accept  application vnd openxmlformats-officedocument spreadsheetml sheet    gt    For Text Files   txt  use     lt input type  file  accept  text plain    gt    For Image Files   png  jpg etc   use     lt input type  file  accept  image      gt    For HTML Files   htm  html   use    lt input type  file  accept  text html    gt    For Video Files   avi   mpg   mpeg   mp4   use    lt input type  file  accept  video      gt    For Audio Files   mp3   wav  etc   use    lt input type  file  accept  audio      gt    For PDF Files  use    lt input type  file  accept   pdf    gt     DEMO  http   jsfiddle net dirtyd77 LzLcZ 144     NOTE    If you are trying to display Excel CSV files   csv   do NOT use    text csv application csv text comma-separated-values  works in Opera only       If you are trying to display a particular file type  for example  a WAV or PDF   then this will almost always work       lt input type  file  accept   FILETYPE    gt

User · Answer

Now you can use new html5 input validation attribute pattern       xlsx xls csv

[html] HTML Input="file" Accept Attribute File Type (CSV)

Examples related to html

Examples related to csv

Examples related to file-upload

Examples related to input

Examples related to content-type