HTML Input=“file” Accept Attribute File Type (CSV)

Question

I have a file upload object on my page:

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

with the following excel files on my desktop:

file1.xlsx

file1.xls

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/

Answer 1

You can try using the following code:

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

Valid Accept Types are as follows:

For CSV files (.csv), use this: 

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

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

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

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

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

For Text Files (.txt) use the below code: 

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

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

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

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

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

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

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

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

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

For PDF Files, try this:

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

DEMO:

http://jsfiddle.net/dirtyd77/LzLcZ/144/

NOTE: If you want to display Excel CSV files (.csv), then do NOT use:

• text/csv
• application/csv
• text/comma-separated-values (works in Opera only).

If you want to display a particular file type (for example, a WAV or PDF), then use this:

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

Answer 2

The code to find the desired output:
<label for="fileSelect">My_Spreadsheet_file</label>
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

The Accept types that are valid:
For CSV files (.csv), use:
<input type="file" accept=".csv" />
For Excel Files (.xls), use:
<input type="file" accept="app/vnd.ms-excel" />
For Text Files (.txt) use:
<input type="file" accept="plain text" />
For Image Files (.png/.jpg/etc), use:
<input type="file" accept="image/*" />
For HTML Files (.htm,.html), use:
<input type="file" accept="text/htmlfile" />
For Video Files (.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" />

If you are trying to display a particular file type (for example, a PDF), then all the methods above will work.

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