Question

1

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

rated 0 times [ 6] [ 5] / answers: 1 / hits: 149466 / 8 Years ago, mon, january 9, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lewis

Add To Favorites

Follow

Total Points: 739

Total Questions: 100

Total Answers: 94

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 8 Years ago miles · Accepted Answer

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>