Contact Form 7 remove uploaded file

Question

please it's possible add to contact form 7 in WordPress button for removing of uploaded file?

add button for removing file

Thanks a lot.

Kind regards,

Jan

Answer 1

if I understand you question correctly, you want to be able to cancel/reset a file selection on an <input type="file" /> field prior to submitting the form. If this is what you want, the short answer is no, there isn't any cf7 tags to do this, nor is there any plugin extension to do this either (that I yet know of:). You will need to implement it yourself in your form using some custom javascript.

To upload custom javascript to a contact form 7 you can refer to this answer.

To reset a file input field, you can refer to this answer.

I hope this helps you.

Answer 2

We can easily achieve with simple jquery click function.

This is our file upload html, So we can write a click function

<input type="file" name="file-711" size="40" class="wpcf7-form-control wpcf7-file" id="imgupload" accept=".png,.jpg,.jpeg,.pdf,.doc,.docx" aria-invalid="false">

Jquery

$(document).ready(function () {
$('#imgupload').change( function(event) {
        var len = $('.img-remove').length;
        if(len < 1){
         $('.fileupload-wrp').append('<a class="img-remove" id="remvImg" style="" onclick="removeimg()" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Remove Image"><i class="fa fa-trash"></i></a>');
        }
    });
}); //imgupload is the file upload id

For each and every upload I append remove button

Remove click event

function removeimg(){
 if(confirm("Are you sure you want to delete this?")){
    $('#imgupload').val('');
    $("#remvImg").remove();
 }      
}