JSFiddle - React, Tailwind, and code Playground

by Peter Doyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<label for="file-upload" class="custom-file-upload">
    Custom Upload <span class="file-name"></span>
</label>
<input id="file-upload" type="file"/>

CSS

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
	
  $("#file-upload").on("change",function(){
  		var f = $(this).val();
    	f = f.replace(/.*[\/\\]/, '');
  		$(".file-name").text(f)
  })

})