1

I would like to custom input files upload from CF7 in WP.

There are many ways to custom the button, but I need to display the file name once it has been uploaded.

I found one way to do it with this code :

<input type="file" class="custom-file-input">
<label class="custom-file-label" for="custom-file-input">Your file</label>

And this script :

<script>
$(".custom-file-input").on("change", function() {
 var fileName = $(this).val().split("\\").pop();
 $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

It works, but with CF7, we use shortcode te create inputs.

And it gives something like :

<span class="wpcf7-form-control-wrap">
<input type="file" name="your-file" size="40" class="wpcf7-form-control wpcf7-file custom-file-input" id="your-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx" aria-invalid="false">
</span>
<label class="custom-file-label" for="your-file">Your file</label></div>

And it doesn't work anymore. JS seems ok with the CF7 code.

Maybe it doesn't work because of CF7's way of generating code ?

I don't know.. Do you have an idea ? Thank in advance for your help :)

Hellooo
  • 15
  • 1
  • 5

2 Answers2

1
[file file-265 id:fileuploadfield class:fileuploadfield limit:120000 filetypes:.jpg .png 1/]
[text uploadtextfield id:uploadtextfield class:uploadtextfield]
<input type="button" id="uploadfile" value="select">
dipali mathukiya
  • 25
  • 2
0

As CF7 wraps the field inside <span> first you need to look for the parent container (assuming .custom-file), and then look for the .custom-file-label.

$(".custom-file-input").on("change", function() {
    var filename = $(this).val().split("\\").pop();
    $(this).parents(".custom-file").find(".custom-file-label").addClass("selected").html(filename);
});

This is kind of a late answer, but I was having this same issue today and this question helped me find the solution.

John S
  • 71
  • 4