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:
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...
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!
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.
Using type="file" and accept="image/*" (or the format you want), allow the user to chose a file with specific format.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With