Bootstrap Snippet Custom Input Type File using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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 ---------->
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
$('#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('');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Custom Input Type File"
Bootstrap 4.1.1 Snippet by iammohitverma

Related: See More

Questions / Comments:

"Custom Input Type File" Bootstrap 4.1.1 Snippet by iammohitverma

Related: See More

Questions / Comments:

"Custom Input Type File"
Bootstrap 4.1.1 Snippet by iammohitverma