Html Input="File" Accept Attribute File Type (Csv)

How to accept *.csv format input file cross browsers?

Just use comma for that )

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

Restricting HTML file input to accept only .txt, and not .csv (in Chrome)

The accept attribute specifies the types of files that the form input will accept.

Syntax

<input accept="file_extension|audio/*|video/*|image/*|media_type">

Tip: To specify more than one value, separate the values with a comma (e.g. .

Solution

Simply include the filetype you'd like to allow in the accept attribute, as follows:

<input accept=".txt"

Note: Because this file-restriction is client-side, users are able to remove this attribute and bypass this file-restriction, potentially leading to a vulnerability.

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)'>

File input 'accept' attribute - is it useful?

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.

Usage

Note: These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.

h1 { font-size: 1em; margin:1em 0; }h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }

<h1>Match all image files (image/*)</h1><p><label>image/* <input type="file" accept="image/*"></label></p>
<h1>Match all video files (video/*)</h1><p><label>video/* <input type="file" accept="video/*"></label></p>
<h1>Match all audio files (audio/*)</h1><p><label>audio/* <input type="file" accept="audio/*"></label></p>
<h1>Match all image files (image/*) and files with the extension ".someext"</h1><p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>
<h1>Match all image files (image/*) and video files (video/*)</h1><p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

Input type='file' accept pdf and excel file extension

Try following:

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

In modern browser you can also use file extensions directly like:

accept=".pdf, .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>

Accept attribute for input[type=file] allows other extensions

This is apparently a Mac Os only bug.

I wasn't able to reproduce it from my win10 VM, but it is still there in v.55.0.2861.0 canary.

The problem seems to come from the .txt.

It's like it will accept any text/* files, when this extension is set.

You can star this chromium issue which treats of the same underlying issue (with a different extension).

<input type="file" accept=".txt">