JSFiddle - React, Tailwind, and code Playground

File input 'accept' attribute for <input type="file"/>

by NunoMira

HTML

<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>
<aside><p>Note: As of writing, the spec specifies a comma-delimited list, but it's provided example is space-delimited.</p></aside>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"/></label></p>
<aside><p>Note: As of writing, the spec specifies a comma-delimited list, but it's provided example is space-delimited</p></aside>

<h1>Match all .xls, .xlsx, .csv files</h1>
<p><label><input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> </label></p> 

<h1>Match only show Excel (.xlsx) files</h1>
<p><label><input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> </label></p>

<h1>Match only show Excel (.xls) files</h1>
<p><label><input type="file" accept="application/vnd.ms-excel" /> </label></p>
    
<h1>Match only show .WAV files...</h1>
<p><label><input type="file" accept=".wav" /> </label></p>

<h1>Match only show .PDF files</h1>
<p><label><input type="file" accept=".pdf" /> </label></p>

<h1>Match only show text files</h1>
<p><label><input type="file" accept="text/plain" /> </label></p>

<h1>Match only show html files</h1>
<p><label><input type="file" accept="text/html" />  </label></p>

<a href="http://lesson8.blogspot.in/2013/05/how-to-create-and-editorfor-fileupload.html">Uploading multiple files upload in asp.net mvc 4 razor provides client-side validation too.</a>

CSS

body {
    margin:1em;
    font-size:.9em;
}
h1 {
    margin:1em 0;
    font-weight:bold;
    font-size:20px;
}
h1:not(:first-of-type) {
    border-top:1px solid #ccc;
    padding:1em 0 0;
}
p {
    margin:1em 0;
}
p label {
    display:inline-block;
    padding:.1em .1em .1em .3em;
     -moz-appearance: none;
    -webkit-appearance: none;
    text-align: left;
    -webkit-rtl-ordering: left;
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
    background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
aside {
    margin-top:-.5em;
}
aside p {
    color:#333;
    font-size:.8em;
    font-family:sans-serif;
}

JavaScript

//para aceitar determinados tipos de ficheiros em HTML5