JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" name="file" id="file" class="inputfile" onchange="troca()" />
<label for="file" id='label'><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;
}

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

.inputfile:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

JavaScript

function troca() {
	var file = document.getElementById("file");
	var nomeArq;
	var fullPath = file.value;
	if (fullPath) {
	   var startIndex = fullPath.indexOf('\\\\') >= 0 ? fullPath.lastIndexOf('\\\\') : fullPath.lastIndexOf('/');
	   var filename = fullPath.substring(startIndex);
	   if (filename.indexOf('\\\\') === 0 || filename.indexOf('/') === 0) {
	       filename = filename.substring(1);
	   }
	   nomeArq = filename;
	} else {
	   nomeArq = 'imagem.jpg';
	}
	nomeArq = nomeArq.replace(/.*[\/\\]/, '');
	var label = document.getElementById('label');
	label.innerHTML = nomeArq;
}