JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/thielicious/selectFile.js/master/selectFile.js"></script>
<input type=file hidden id=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>
SCSS
// example style
* {
border-radius:10px;
}
#selected{
text-transform:uppercase;
color:teal;
padding:0 5px;
border: {
width:1px;
style:solid;
color:grey;
}
font:{
family:Consolas;
size:0.8em;
}
}
[value=getFile]{
background:teal;
cursor:pointer;
color:white;
padding:0 5px;
font-family:Trebuchet MS;
border:0;
&:hover{
background:#0aa;
}
}
JavaScript
var getFile = new selectFile;
getFile.targets('choose','selected');