How to Validate for Only CSV File Uploads Using the Pattern Attribute Using Html5

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

Accept csv files only via a Html file input

You can add a validation onchange an validation the file extension.

Though in html the input type accepts .png but in js the regex is failing since it is designed to accepts only csv. You can modify the html to accept only csv

var regex = new RegExp("(.*?)\.(csv)$");
function triggerValidation(el) {  if (!(regex.test(el.value.toLowerCase()))) {    el.value = '';    alert('Please select correct file format');  }}

<input id="csvFileInput" type="file" accept=".png" onchange='triggerValidation(this)'>

Validation of file extension before uploading file

It's possible to check only the file extension, but user can easily rename virus.exe to virus.jpg and "pass" the validation.

For what it's worth, here is the code to check file extension and abort if does not meet one of the valid extensions: (choose invalid file and try to submit to see the alert in action)

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    function Validate(oForm) {    var arrInputs = oForm.getElementsByTagName("input");    for (var i = 0; i < arrInputs.length; i++) {        var oInput = arrInputs[i];        if (oInput.type == "file") {            var sFileName = oInput.value;            if (sFileName.length > 0) {                var blnValid = false;                for (var j = 0; j < _validFileExtensions.length; j++) {                    var sCurExtension = _validFileExtensions[j];                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {                        blnValid = true;                        break;                    }                }                                if (!blnValid) {                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));                    return false;                }            }        }    }      return true;}

<form onsubmit="return Validate(this);">  File: <input type="file" name="my file" /><br />  <input type="submit" value="Submit" /></form>

How to validade in HTML5 to only allow in 'input type="file"' JPG, GIF or PNG?

Try something like

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Click here for the latest browser compatibility table

Live demo here

To select only image files, you can use this accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Live demo here

Only gif, jpg and png will be shown, screen grab from Chrome version 44

Limit file format when using <input type="file">?

Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.

But still, the accept attribute of <input type = "file"> can help to provide a filter in the file select dialog box of the OS. For example,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> 
<input type="file" accept=".xls,.xlsx" />

How to allow <input type="file"> to accept only image files?

Use the accept attribute of the input tag. To accept only PNG's, JPEG's and GIF's you can use the following code:

<label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>