<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="upload-claim-file"> <input type="file" id="claim-award-files" /> <label for="claim-award-files" class="custom-file-add"> <p class="file-attach"><span class="material-icons"> + </span> Attach File</p> </label> <p class="file-attached"><span class="added-file-name"></span> <span class="file-delete material-icons">delete</span></p> </div> </div> </div>

.upload-claim-file { height: 50px; } .upload-claim-file p { font-size: 16px; color: #3694df; } .upload-claim-file .file-attach { cursor: pointer; } .upload-claim-file .file-delete:hover { color: red; cursor: pointer; } .upload-claim-file span.material-icons { font-size: 20px; line-height: normal; transform: translateY(4px); } .upload-claim-file .file-attached { display: none; } .upload-claim-file input#claim-award-files { display: none; } .upload-claim-file.file-uploaded label.custom-file-add { display: none; } .upload-claim-file.file-uploaded .file-attached { display: block; }

$('#claim-award-files').on('change', function () { var imgName = $(this)[0].files[0].name; $('.added-file-name').text(imgName); $(this).parent().addClass('file-uploaded'); }); $('.file-delete').on('click', function() { $('.upload-claim-file').removeClass('file-uploaded'); $('.added-file-name').text(''); $('#claim-award-files').val(''); });