CODEWITHSUNDEEP
htmlcsvfile-uploadinputcontent-type
Dom
Dom

Reputation: 40491

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

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/

Upvotes: 739

Views: 916654

Answers (12)

RenatoIvancic
RenatoIvancic

Reputation: 2092

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.

Upvotes: 4

Mohammed ziou
Mohammed ziou

Reputation: 127

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

Upvotes: 9

Dom
Dom

Reputation: 40491

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!

Upvotes: 1932

Nazmul Haque
Nazmul Haque

Reputation: 868

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"/>

Upvotes: 3

Lancer.Yan
Lancer.Yan

Reputation: 896

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"

Upvotes: 6

Ihor
Ihor

Reputation: 163

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" />

Upvotes: 6

Big Money
Big Money

Reputation: 10088

These days you can just use the file extension

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

Upvotes: 273

eduardomozart
eduardomozart

Reputation: 1464

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

Upvotes: 18

trojan
trojan

Reputation: 1535

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" />

Upvotes: 17

Olga Lisovskaya
Olga Lisovskaya

Reputation: 61

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.

Upvotes: 5

iiic
iiic

Reputation: 1362

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

Upvotes: -2

yogi
yogi

Reputation: 19619

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.

Upvotes: 42

Related Questions