JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<!-- first row starts here-->
    <div class="row">
        <div class="col-xs-12 col-sm-2 col-md-4">
            <div class="mob_pass">
                <label class="ctm_fnt">Passport Photo </label>
                <br>
                    <div class="custom-file-input">
                        <input type="file" class="checkfile" >
                            <input type="text" class="txt_field ctm_widt check"  placeholder="Attached File" disabled/>
                            <button class="cst_select ">
                                <i class="fa  fa-rotate-90">
                                </i> Attach
                            </button>
                            </div>
                        <a href="#" target="_blank" class="preview">View</a>
                    </div>
                    </div>
                <div class="col-xs-6 col-sm-2 col-md-2">
                    <label class="lbl_accep">Accepted ?</label><br/>
                    <input type="checkbox" class="lbl_chk_acpt_right" >
                        </div>
                    <div class="col-xs-6 col-sm-2 col-md-2">
                        <label class="lbl_accep">Accepted by</label><br/>
                        <label id="txt_acceptedby" class="lbl_accept">Sufiyans</label>
                    </div>
                    <div class="col-xs-6 col-sm-2 col-md-2">
                        <label class="lbl_accep">Accepted on</label><br/>
                        <label id="txt_acceptedon" class="lbl_accept">01/09/2015</label>
                    </div>
                    <div class="col-xs-6 col-sm-2 col-md-2">
                        <label class="lbl_accepft">Document Remarks</label><br/>
                        <select class="slt_Field" id="txt_dcmRem" style="width:135px;" name="txt_dcmRem">
                            <option value="" selected='selected'>&nbsp; </option>
                            <option value="COLR">Coloured Copy Required</option>
                            <option...

CSS

.custom-file-input{
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding-top: 0px;
}
.custom-file-input input[type="file"] {
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 29%;
    z-index: 999;
}
.cst_select{
    color: #fff;
    background-color: #D3832C;
    border-bottom:2px solid #000;
    width: 91px;
    height: 25px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    margin-left:20px;
}
.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");    
	$preview.hide();
    $(".checkfile").on("change", function(){     
    	var filename = this.value;
       	var files = this.files;
        var URL = window.URL||window.webkitURL;
        var url = URL.createObjectURL(files[0]);
        $(this).closest('.row').find('.preview').attr("href", url).show();
        $(this).next('.check').prop("disabled", true);
        var myfile = $(this).val();    
        var ext = myfile.split('.').pop();
        if (ext == "pdf" || ext == "jpeg" || ext=="jpg") {
            $(this).next('.check').val(filename);
		} else {
            $(this).closest('.row').find('.preview').hide()
		    alert('Invalid File Type')
            $(this).next('.check').val('');
            e.preventDefault();
        }
        if(e.currentTarget.files[0].size>=1024*1024*5)
        { 
            alert('File Size cannot be more than 5 MB')
            e.preventDefault();
         	$(this).closest('.row').find('.preview').hide()
        }
	});
    $(document).on('click', ".lbl_chk_acpt_right", function () {
    	if ($(this).is(':checked')) {
        	$(this).closest('.row').find('.checkfile').attr('disabled', true);
            $(this).closest('.row').find('.cst_select ').addClass("cst_select_dis");
        } else {
        	$(this).closest('.row').find('.checkfile').removeAttr('disabled')
            $(this).closest('.row').find('.cst_select ').removeClass("cst_select_dis");
        }
	});
});