JSFiddle - React, Tailwind, and code Playground

by Joseph

HTML

IE 10+, Edge, Chrome:<br />
<label>.xls,.xlsx files</label>
<input type="file" accept=".xls,.xlsx" />
<br />
<br />
IE 10+, Edge, Chrome, Firefox:<br />
<label>.xls,.xlsx files (using MIME-types)</label>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
<br />
<br />
<h3>
Recommended way of achieving file type filter:
</h3>
IE 10+, Edge, Chrome, Firefox:<br />
<label>.xls,.xlsx files (using both extensions and MIME-types)</label>
<input type="file"
     accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
<br />
<br /> <br />
<br />
    <b>Note:</b><p>Edge allows to choose files of any type by default, even if accept attribute is set, although it adds a custom filter list to the file-select dialog box. The user must manually apply the filter from the file-select dialog box.</p>