Custom file input upload and display file name

Hello

I would like to custom input files upload from CF7.

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 ??