CODEWITHSUNDEEP
javascriptjqueryhtmlformsfile-upload
egr103
egr103

Reputation: 3978

Apply filename to label when uploading a file

I have hidden the file uploader input field. I use a label (so I can style it) as the clickable element to upload a file. Here's a jsFiddle

I've added a JS workaround to change the text of the label so when you select a file, the text "Upload a file" is replaced by the actual filename.

My problem is getting my code to work with multiple file uploaders. With the code below, no matter which file uploader I click on, the file name populates always the first file upload field only:

HTML

<p class="hide_this"><span class="wpcf7-form-control-wrap file-02"><input type="file" name="file-02" size="40" class="wpcf7-form-control wpcf7-file" id="file-01" aria-invalid="false"></span><label for="file-01"><span>Upload a file</span></label></p>

<p class="hide_this"><span class="wpcf7-form-control-wrap file-03"><input type="file" name="file-03" size="40" class="wpcf7-form-control wpcf7-file" id="file-02" aria-invalid="false"></span><label for="file-02"><span>Upload a file</span></label></p>

<p class="hide_this"><span class="wpcf7-form-control-wrap file-04"><input type="file" name="file-04" size="40" class="wpcf7-form-control wpcf7-file" id="file-03" aria-invalid="false"></span><label for="file-03"><span>Upload a file</span></label></p>

JS

$('input[type=file]').change(function(){
  var filename = $(this).val().split('\\').pop();
  var idname = $(this).attr('id');
  $('.'+idname).next().find('span').html(filename);
});

Upvotes: 1

Views: 2845

Answers (2)

Saumini Navaratnam
Saumini Navaratnam

Reputation: 8850

Try this $('label[for="'+idname+'"]').find('span').html(filename);

Upvotes: 1

Matt Way
Matt Way

Reputation: 33141

The reason why this isn't working for you is that you have a mismatch of ids. You simply need to make the id of the <input> match the id of the related <span>.

Here is an updated fiddle: https://jsfiddle.net/m7eqj9ku/1/

Note: Don't forget to setup your fiddles to work with external libs

Upvotes: 1

Related Questions