JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<input type="file" id="test">
<div class="button-group"> 
    <a href="#" id="browse" class="button primary">Browse</a>
    <a href="#" id="save" class="button">Save</a>
    <a href="#" id="clear" class="button danger">Clear</a>
</div>
<input type="text" id="testfile"></input>

CSS

body {
    padding:100px;
}
input[type="file"] {
    position:absolute;
    display:none;
}
#testfile {
    height: 26px;
    text-decoration: none;
    background-color: #eee;
    border:1px solid #ccc;
    border-radius:3px;
    float:left;
    margin-right:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#aaa;
    text-indent:5px;
}

JavaScript

$("#browse").click(function () {
    $("#test").click();
})

$("#save").click(function () {
    alert('Run a save function');
})
$("#clear").click(function () {
     $('#testfile').val('');
})

$('#test').change(function () {
    $('#testfile').val($(this).val());
})