I have a form with the plugin WPCF7 and i have made it possible to upload multiple files(with drag and drop). Now the customer wants to upgrade the form too be able to upload several files at a time with drag and drop. So I was wondering if this is able to do with Dropzonejs or an other plugin.
The requirements are:
- Minimum able to upload 10 files
- Validation before submit
- Kind reminder if no files are attached
- Captcha
- Drag and drop for files
- Drag and drop multiple files with drag and drop
- Thank you page after submission
I’ve accomplished all of the above with WPCF7, bootstrap, jquery and css. Except for the multiple files uploads with drag and drop.
Some code example:
var wantToUpload = 'unknown';
jQuery.noConflict();
(function( $ ) {
$(function() {
$('.send-request').click(function(){
wantToUpload = false;
$('#noFiles').modal('hide');
$('#wpcf7-f1682-p251-o1 form').submit();
});
$('.want-to-upload').click(function(){
wantToUpload = true;
$('#noFiles').modal('hide');
});
$('#wpcf7-f1682-p251-o1 form').on('submit',function(e){
var isfile = false;
$('#wpcf7-f1682-p251-o1 form :input[type="file"]').each(function(item,ele){
if(ele.value != ''){
isfile = true;
}
});
if(wantToUpload == 'unknown' && !isfile){
$('#noFiles').modal();
e.preventDefault();
return false;
}
else if(wantToUpload == true && !isfile){
$('#noFiles').modal();
e.preventDefault();
return false;
}
else if(wantToUpload == false){
return true;
}
});
});
});
Some more code:
$(function () {
$("input:file").change(function () {
var val = $(this)[0].files[0].name;
var fid= $(this).prop('id');
var nr = fid.split('-')[1];
nr = parseInt(nr);
if (val != "") {
$(".fileupload").addClass("hasfile");
$("#fileuploadtext3").show();
$("#"+fid).hide();
$("#file-"+(nr+1)).removeClass('hidden');
$(".files").append('<li><span class="icon doc"></span>'+val+'<a data-file="'+fid+'" href="https://wordpress.stackexchange.com/questions/188857/javascript:void(0);" class="icon x remove-file"></a></li>');
$('.remove-file').bind('click',function(){
var fid = $(this).data('file');
$('#'+fid).val('');
$(this).parent().remove();
});
} else {
$(".fileupload").removeClass("hasfile");
$("#fileuploadtext1").show();
$("#fileuploadtext2").show();
$("#fileuploadtext3").show();
$("#fileuploadtext0").hide();
}
});
function scrollTop(){
var myTop = 150;
$("html, body").animate({
scrollTop: myTop
}, 300);
}
$('.wpcf7-form').submit(function(event){
var valid = true;
$('[aria-required]').each(function(i,ele){
if(ele.value == ''){
$(this).parent().parent().addClass('alert');
valid = false;
}
});
if (!valid){
event.preventDefault();
scrollTop();
return false;
}
return true;
});
});
The generated html by wpcf7:
<form name="" action="/en/request-a-quote/#wpcf7-f2032-p251-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="2032">
<input type="hidden" name="_wpcf7_version" value="4.1.2">
<input type="hidden" name="_wpcf7_locale" value="sv_SE">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2032-p251-o1">
<input type="hidden" name="_wpnonce" value="72348e62ed">
</div>
<section class="manami content bgcolor-3">
<div class="row">
<div class="col-sm-10 col-xs-12">
<div class="row">
<div class="col-xs-6">
<div class="input_box"><label class="label" for="text-435"><span class="input_label">Name*</span></label><span class="wpcf7-form-control-wrap client-name"><input type="text" name="client-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input__field--manami" id="text-435" aria-required="true" aria-invalid="false"></span></div>
</div>
<div class="col-xs-6">
<div class="input_box"><label class="label" for="text-436"><span class="input_label">Email*</span></label><span class="wpcf7-form-control-wrap email"><input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input__field input__field--manami" id="text-436" aria-required="true" aria-invalid="false"></span></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="input_box"><label class="label" for="text-437"><span class="input_label">Company*</span></label><span class="wpcf7-form-control-wrap company"><input type="text" name="company" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input__field input__field--manami" id="text-437" aria-required="true" aria-invalid="false"></span></div>
</div>
<div class="col-xs-6">
<div class="input_box"><label class="label" for="text-438"><span class="input_label">Phone*</span></label><span class="wpcf7-form-control-wrap phone"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input__field input__field--manami" id="text-438" aria-required="true" aria-invalid="false"></span></div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-xs-12 fileupload hasfile">
<span class="wpcf7-form-control-wrap file1"><input type="file" name="file1" value="1" size="40" class="wpcf7-form-control wpcf7-file sem-fileupload active" id="file-938" aria-invalid="false"></span><br>
<span class="wpcf7-form-control-wrap file2"><input type="file" name="file2" value="1" size="40" class="wpcf7-form-control wpcf7-file sem-fileupload hidden" id="file-939" aria-invalid="false"></span><br>
<span class="wpcf7-form-control-wrap file3"><input type="file" name="file3" value="1" size="40" class="wpcf7-form-control wpcf7-file sem-fileupload hidden" id="file-940" aria-invalid="false"></span><br>
<span class="wpcf7-form-control-wrap file4"><input type="file" name="file4" value="1" size="40" class="wpcf7-form-control wpcf7-file sem-fileupload" id="file-941" aria-invalid="false" style="display: none;"></span><br>
<span class="wpcf7-form-control-wrap file5"><input type="file" name="file5" value="1" size="40" class="wpcf7-form-control wpcf7-file sem-fileupload" id="file-942" aria-invalid="false"></span><br>
<span class="wpcf7-form-control-wrap file6"><input type="file" name="file6" value="1" size="40" class="wpcf7-form-control wpcf7-file sem-fileupload hidden" id="file-943" aria-invalid="false"></span><p></p>
<h2 class="text-center" id="fileuploadtext0"></h2>
<h2 class="text-center" id="fileuploadtext1">Click or drag and drop your file here<br>(Max 60mb)</h2>
</div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="files">
<li><span class="icon doc"></span>14080.png<a data-file="file-941" href="https://wordpress.stackexchange.com/questions/188857/javascript:void(0);" class="icon x remove-file"></a></li></ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="textarea_box"><span class="input_label"><span class="comment">Comments</span> (E.g to what language)</span><span class="wpcf7-form-control-wrap comments"><textarea name="comments" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea input__field input__field--manami" id="textarea-615" aria-invalid="false"></textarea></span><label class="label" for="textarea-615"></label></div>
</div>
</div>
<div class="captch-wrap row">
<div class="col-xs-2">
<div class="input_box"><label class="label" for=""><span class="input_label">*Type in following code to continue</span></label><input type="hidden" name="_wpcf7_captcha_challenge_captcha-540" value="3498505078"><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-540" width="72" height="24" alt="captcha" src="https://www.globaltext.se/wp-content/uploads/wpcf7_captcha/3498505078.png"></div>
</div>
<div class="col-xs-4">
<div class="input_box"><label class="label" for=""><span class="input_label"></span></label><span class="wpcf7-form-control-wrap captcha-540"><input type="text" name="captcha-540" value="" size="40" class="wpcf7-form-control wpcf7-captchar input__field input__field--manami" aria-invalid="false"></span></div>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 col-sm-4">
<p style="margin-top:24px;"><input type="submit" value="Request quote" class="wpcf7-form-control wpcf7-submit"></p>
</div>
</div>
</div>
</div>
</section>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>