JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-file-input" id="custom-file-input">
    <input type="file" class="checkfile" />
    <input type="text" class="txt_field ctm_widt check" id="file_name" disabled placeholder="Attached File" />
    <button id="btn_selct" class="cst_select "> <i class="fa  fa-rotate-90">
            </i> Attach</button>
</div>
<a href="#" target="_blank" class="preview">View</a>

<input id="accpt_chk" class="accpt_chk" type="checkbox" />Hide File Upload

CSS

.custom-file-input {
    display: inline-block;
    overflow: hidden;
    padding-top: 0;
    position: relative;
}
.custom-file-input input[type="file"] {
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 29%;
    z-index: 999;
}
.txt_field {
    border: 1px solid #aeaeae;
}
.cst_select {
    background-color: #d3832c;
    border-color: -moz-use-text-color -moz-use-text-color #000;
    border-style: none none solid;
    border-width: 0 0 2px;
    color: #fff;
    height: 25px;
    margin-left: 20px;
    width: 91px;
}
.cst_select_dis {
    background-color: #b9b9b9;
    color: #fff;
    border-bottom:2px solid #000;
    width: 91px;
    height: 25px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    margin-left:20px;
}

JavaScript

$(document).ready(function () {
    var $preview = $(".preview");
    //var $acceptdiv = $("#accept_div");
    //$acceptdiv.hide();
    $preview.hide();
    $(".check").on("change", function () {
        var filename = this.value;
        var files = this.files;
        var URL = window.URL || window.webkitURL;
        var url = URL.createObjectURL(files[0]);
        $preview.attr("href", url);
        $preview.show();
        //$acceptdiv.show();
        document.getElementById('file_name').value = filename;
        $("#file_name").prop("disabled", true);
    });
    /* health infor addmore ends here*/
    $(document).on('click', ".accpt_chk", function () {
        if ($('.accpt_chk').is(':checked')) {
            $('.checkfile').attr('disabled', 'true')
        } else {
            $('.checkfile').removeAttr('disabled')
            $('.checkfile').prop('enabled', false);
            $(this).closest("#btn_selct").removeClass('cst_select').addClass('cst_select_dis');
            //$('#btn_selct').hasClass('.cst_select ').remove().addClass('.cst_select_dis');
        }
        //$('.qq-upload-button').prop('disabled', !this.checked);
    });
});