JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

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"/>

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() {
		alert("check");
		if($('.accpt_chk').prop(':checked')) {
				$('.checkfile').prop('disabled', true);
			} else {
				$('.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);
	});
 });