JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<input type="file" name="file" id="file" class="inputfile" />
<label for="file"><span>Choose a file</span></label>

CSS

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
    cursor: pointer;
    padding: 1rem;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}

JavaScript

var inputs = document.querySelectorAll( '.inputfile' );
console.log(inputs)
Array.prototype.forEach.call( inputs, function( input )
{
	var label	 = input.nextElementSibling,
		labelVal = label.innerHTML;

	input.addEventListener( 'change', function( e )
	{
		var fileName = '';
			fileName = e.target.value.split( '\\' ).pop();

		if( fileName ){
			label.querySelector( 'span' ).innerHTML = fileName;
      label.style.background = "purple"
		}else{
			label.innerHTML = labelVal;
      }
	});
});