How to display file name for custom styled input file using jquery?

Question

I have styled a file input using CSS:

.custom-file-upload {    border: 1px solid #ccc;    display: inline-block;    padding: 6px 12px;    cursor: pointer;   }

<form>    <label for="file-upload" class="custom-file-upload">      <i class="fa fa-cloud-upload"></i> Upload Image    </label>    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">  </form>  

Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?

Answer 1

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {    var i = $(this).prev('label').clone();    var file = $('#file-upload')[0].files[0].name;    $(this).prev('label').text(file);  });

.custom-file-upload {    border: 1px solid #ccc;    display: inline-block;    padding: 6px 12px;    cursor: pointer;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form>    <label for="file-upload" class="custom-file-upload">      <i class="fa fa-cloud-upload"></i> Upload Image    </label>    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">  </form>