Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html5 file input always accepts "unknown" file type

Tags:

html

forms

csv

I'm writing web app which requires user to select csv file. However due to requiring user to have files with serveral suffixes it's quite typical to have multiple files with similar names while only one of them is .csv. the problem is accept=".csv" works only partially - it allows user to filter by csv but doesn't do it by default filtering by unknown file type

<fieldset name="inputForm">
  <legend>Input</legend>

  <label>Input file:</label>
  <input name="inputFile" type="file" accept=".csv">
</fieldset>

I also tried accept="text/csv, .csv" but it doesn't change anything.

result: screenshot

user could accidentally select for example one of .txt files or .png and that would lead to application malfunction due to malformed input file. User can select filtering by only CSV or only "unknown" but I'd prefer CSV only to be default filter because it's quite obvious nobody gonna ever switch file filtering options so realistically it's useless...

like image 900
Lapsio Avatar asked Sep 09 '16 19:09

Lapsio


People also ask

How do I use a file type in HTML?

The <input type="file"> defines a file-select field and a "Browse" button for file uploads. To define a file-select field that allows multiple files to be selected, add the multiple attribute. Tip: Always add the <label> tag for best accessibility practices!

How do I reset the input value of a file?

To reset a file input in React, set the input's value to null in your handleChange function, e.g. event. target. value = null . Setting the element's value property to null resets the file input.

How do you make an input type file only accept an image?

Using type="file" and accept="image/*" (or the format you want), allow the user to chose a file with specific format.


Video Answer


1 Answers

This is OS behavior and not within the scope of the browser, unfortunately. The accept attribute is mainly for ease of use on the front end and not true validation. I suggest using JavaScript or server-side validation to ensure the file selected is the right mime type desired.

like image 114
Tammy Shipps Avatar answered Nov 15 '22 07:11

Tammy Shipps