Display file name for custom styled input file using jquery

Asked Mar 08 '19 at 20:10

Active Mar 08 '19 at 20:24

Viewed 37 times

I want to show the file name of input file

$("#imgInp").change(function() {
  $("#filename").text(this.files[0].name);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="file-label">
   <input class="file-input" type="file" name="image" id="imgInp">
   <span class="file-cta">
       <span class="file-icon"><i class="fas fa-upload"></i></span>
        <span class="file-label">image</span>
   </span>
   <span class="file-name" id="filename"></span>
</label>

But it didn't work and give me an error

TypeError: $(...)[0] is undefined

edited Mar 08 '19 at 20:24

showdev

28,454
37
55
73

asked Mar 08 '19 at 20:10

John Deck

non of that solutions work for me .. the same error – John Deck Mar 08 '19 at 20:20
1

Your code seems to work for me. Are you able to reproduce the error in the snippet above? – showdev Mar 08 '19 at 20:25
yes it works in the snippet – John Deck Mar 08 '19 at 20:28
Are you sure that the code you posted matches the code that throws the error? The reason I ask is because your code doesn't seem to contain anything like `$(...)[0]`. – showdev Mar 08 '19 at 20:31
ooooh my mistake .. you right the $(...)[0] refer to another part .. it works now .. thank you so much – John Deck Mar 08 '19 at 20:34

Display file name for custom styled input file using jquery

0 Answers0