704

I have a file upload object on my page:

<input type="file" ID="fileSelect" />

with the following excel files on my desktop:

  1. file1.xlsx
  2. file1.xls
  3. file.csv

I want the file upload to ONLY show .xlsx, .xls, & .csv files.

Using the accept attribute, I found these content-types took care of .xlsx & .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/

Community
  • 1
  • 1
Dom
  • 38,906
  • 12
  • 52
  • 81
  • most browsers do not respect the accept attribute since it can be used to encurage users who are not paying attention to transmit sensitive files. – tletnes Aug 06 '12 at 17:25
  • 11
    @tletnes not true, it's supported by most major browsers – Dom Feb 21 '13 at 15:11
  • You can also try this if ($.trim($('#OriginalFileName').val()) != "") { var ext = $('#OriginalFileName').val().split('.').pop().toLowerCase(); if ($.inArray(ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) { $('#OriginalFileNameValid').html('Use .doc,.docx,.pdf files'); } } – Nithin Paul Feb 24 '14 at 07:03
  • 1
    In case any other Ubuntu users are getting confused by this, I have found that in Ubuntu, Firefox defaults to showing "All Files", but adds whatever your "accept" attribute is to the filetype dropdown in the file selection dialog. – mltsy Jan 21 '19 at 23:43

12 Answers12

1849

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.

<label for="fileSelect">Spreadsheet</label>
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

Valid Accept Types:

For CSV files (.csv), use:

<input type="file" accept=".csv" />

For Excel Files 97-2003 (.xls), use:

<input type="file" accept="application/vnd.ms-excel" />

For Excel Files 2007+ (.xlsx), use:

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

For Text Files (.txt) use:

<input type="file" accept="text/plain" />

For Image Files (.png/.jpg/etc), use:

<input type="file" accept="image/*" />

For HTML Files (.htm,.html), use:

<input type="file" accept="text/html" />

For Video Files (.avi, .mpg, .mpeg, .mp4), use:

<input type="file" accept="video/*" />

For Audio Files (.mp3, .wav, etc), use:

<input type="file" accept="audio/*" />

For PDF Files, use:

<input type="file" accept=".pdf" /> 

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...

 <input type="file" accept=".FILETYPE" />

Here's the reason why it is so:

The application types often mean where to open the file. For example, Abode Reader. But when this file is uploaded, the browser doesn't care about opening and asking that app about it. But the extension, however, or type words like the MIME image or audio etcetera work applying directly to file units.

It is possible to use them in relation to a File DOM instance. So, you should use the extension format name. On many devices, like mobiles, it is seen when you click select File, that the non- accepted files in the user menu are excluded in grey... Have a great time spent with your files!

Andy
  • 4,783
  • 2
  • 26
  • 51
Dom
  • 38,906
  • 12
  • 52
  • 81
  • 3
    It seems that Chrome supports this attribute, but Firefox is still working on it. You can vote this bug so they will solve it faster: https://bugzilla.mozilla.org/show_bug.cgi?id=826176 – Salvatorelab Oct 22 '13 at 10:06
  • Hey Dom (and everyone) kind of a nit-picky question, but I used the accept attribute (for csv, xls, and xlsx files) and it works great, except it also allows the user--at least on my machine--to select icon files as well, and then flashes an error message that says "FILE NAME: Catastrophic failure". It will simply allow you to choose another file after that, so not THAT catastrophic, just wondered if anyone had an idea why this would happen? – David Routen Dec 29 '13 at 15:27
  • 3
    @DavidRouten the accept attribute would just filter file types. You would have to use file validation as well to prevent users from selecting other file types. Hope that helps! – Dom Jan 12 '14 at 00:36
  • Note: in Chrome (v 32) it works even with combined types like txt and csv: – Александр Фишер Jan 21 '14 at 00:06
  • I wonder why such an obvious file selector feature is not supported by all modern browsers...maybe issues with native OS support, a best effort strategy is the way to go. – Christophe Roussy Feb 04 '14 at 15:56
  • @HowardShieh what version of safari are you using? – Dom May 15 '14 at 06:24
  • @Dom 7.0.3(9537.75.14) – Haozhe Xie May 17 '14 at 12:58
  • for csv file in FF on ubuntu accept="text/csv" works not ".csv" – Faraz May 27 '14 at 12:09
  • 1
    is not works in Firefox. Is there any other solution to make as works this in Firefox. – Ganesa Vijayakumar Sep 05 '14 at 13:06
  • Is there a way to combine two value of Mime type? – Fractaliste Nov 15 '14 at 09:16
  • doesn't work here either. – pceccon Jan 10 '16 at 18:14
  • 4
    `` worked for me in firefox, chrome and opera on mac. only .csv did not work in all browsers. – tmas Feb 15 '16 at 15:22
  • when we are using accept=".csv", why there is a semi-colon ( *.csv; ) at last of filter tab in file upload dialouge box. ( Ubuntu 14.04- Firefox 40.0.3 ) – LoveToCode Mar 30 '16 at 12:40
  • i used accept="<*.csv>" it working fine and in filter tab it doesn't contained "*.csv;", it contained " CSV Document". Thnx – LoveToCode Mar 30 '16 at 12:48
  • yuup,, it works for me. thanks a lot. To select ONLY *.xls and *.xlsx using this code : `accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"` – gustav Jul 29 '17 at 12:10
  • 1
    For the xls and xlsx mime types mentioned above, make sure that you have the correct player application installed (like Microsoft excel or word etc). – srinivas Jul 12 '18 at 16:59
  • 1
    @ni8mr try accept=".xml" or accept="application/xml" or accept="text/xml" – Taras Melon Jul 23 '19 at 09:59
  • excel type "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" – xgqfrms Feb 12 '20 at 15:19
  • in MVC 5, in a .cshtml View, '@accept = ".xlsx, .xls, .csv" ' works perfectly. The solution above with 'accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ' does not work. – AlinPaul8806 Mar 04 '20 at 11:40
  • After my test, on 【macOS 10.15.7 Catalina】, the answer of 【Dom / Rikin Patel】 cannot recognize the [.xlsx] file normally. So I sum up the following answers : 【accept=".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"】 – Lancer.Yan Nov 20 '20 at 08:23
  • 1
    As I was expecting to have to hunt down a mime-type, I was happily surprised by the simplicity of just '.whatever' to work. And since some comments on this page were suggesting lack of support by 'modern browsers', I'm happy to report that on windows it works just fine in at least Chrome, Firefox and Edge (august 2023). – Windgazer Aug 17 '23 at 09:44
258

These days you can just use the file extension

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
Big Money
  • 9,139
  • 6
  • 26
  • 37
  • 3
    Although amazingly this (and the alternative `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel`) still doesn't appear to work on Edge 41.16299.820.0 https://stackoverflow.com/questions/31875617/input-accept-attribute-in-microsoft-edge#32214646 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/13661175-full-spec-support-for-accept-in-input-type-file – SharpC Jan 29 '19 at 16:11
42

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

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

I guess it'll help you of course you can change this script according to your needs.

yogi
  • 19,175
  • 13
  • 62
  • 92
  • 6
    Cool workaround but I do not understand why such an attribute is considered 'old'. This is a basic file selector feature on nearly every OS, the browsers should do their best to make it work and it would help many users... – Christophe Roussy Feb 04 '14 at 15:59
  • 4
    The accept attribute is not old and is supported in the major browsers except for IE/Edge: http://caniuse.com/#feat=input-file-accept. Please rephrase your answer as it is misguiding. – thomaux Sep 14 '16 at 08:33
  • 3
    The most important aspect of the `accept` attribute is the hint it provides to the open-file dialog. The user should be presented with matching files by default, presumably with an option to select other types if they wish -- this is how most modern browsers behave now. – Coderer Jun 27 '17 at 06:49
  • sender.value no longer works. It should be sender.target.value – eddy Sep 10 '20 at 20:07
17

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

Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
eduardomozart
  • 1,444
  • 15
  • 14
  • 2
    Hi Dom! I want to say sorry because your answer (marked as right) is OK and I do not have many attention on it before because I was testing the site in Opera only. After testing in other browsers, I see that you answer is more complete. But it does not work in all browsers. Firefox 17 does not support accept attr how a filter in File Dialog (https://bugzilla.mozilla.org/show_bug.cgi?id=83749#c14), so this property is suspenseful for me. I will use javascript file validation anyway, but use text/csv in accept attr because it is the default of IANA http://www.iana.org/assignments/media-types – eduardomozart Mar 07 '13 at 15:20
15

This didn't work for me under Safari 10:

<input type="file" accept=".csv" />

I had to write this instead:

<input type="file" accept="text/csv" />
trojan
  • 1,465
  • 19
  • 27
6

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:

<input type="file" accept="text/plain, .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
Ihor
  • 131
  • 1
  • 6
6

just write the extensions you want to accept comma separated in the action atr in the out

<input type="file" accept=".any, .ext, .you, .want">
Mohammed ziou
  • 91
  • 1
  • 6
5

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 < $('.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.

Rob Quincey
  • 2,834
  • 2
  • 38
  • 54
  • Doing this and selecting a .csv file I get `type: "text/csv"` but using `accept="text/csv"` on an input doesn't filter files correctly (tested on Brave / Chromium). Using `accept=".csv"` works though. For playing it safe if you don't want to test in all common browsers I'd use both mime type and file extension like so `accept="text/csv,.csv"`. – Haprog Mar 19 '21 at 07:32
5

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=".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"
Lancer.Yan
  • 857
  • 13
  • 10
3

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) < 0 && 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.

RenatoIvancic
  • 1,798
  • 3
  • 21
  • 36
0

You can use the following accept types

<input id="upload_file" accept="image/png,image/jpg,image/jpeg,.doc, .docx,.xls,.xlsx,.pdf,.csv," name="upload_file" type="file"/>
Nazmul Haque
  • 720
  • 8
  • 13
-2

Now you can use new html5 input validation attribute pattern=".+\.(xlsx|xls|csv)".

iiic
  • 1,366
  • 2
  • 15
  • 23
  • 14
    According to [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-pattern), `This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.` Regarding the file input, they go on to say `file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.` – Dom Nov 06 '13 at 14:04