How can I validate for only CSV file uploads using the pattern attribute using HTML5?

Now you can use the new HTML5 input validation attribute:

pattern="^.+\.(xlsx|xls|csv)$"

Accept type for other files (Reference: HTML5 Documentation):

For CSV:

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

For Excel files, 2003-2007 (.xls):

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

For Excel files, 2010 (.xlsx):

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

For text files (.txt):

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

For image files (.png, .jpg, etc.):

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

For HTML files (.htm, .html):

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

For video files (.avi, .mpg, .mpeg, .mp4):

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

For audio files (.mp3, .wav, etc.):

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

For PDF files, use:

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

Use this:

<input type="file" name="txtFile" id="txtFile" class="required" accept=".csv,text/csv" />

Mentioning the MIME type is good practice.


It is not easy to accept just one of the file types. It depends on different OS and installed text reading programmes. In Unix type systems if you pass .csv file you will get .csv file type, but if you will pass the same file on Windows you will ger different file types, such as text/comma-separated-values, text/csv, application/csv, application/excel, application/vnd.ms-excel, application/vnd.msexcel, text/anytext.

It calls mime-types and can be different for any of text type files. Here is the link where you can read more.