[Plugin: Contact Form 7] Upload-attach multiple files using only 1 file input button?

It is very important for me too, even if I have to do some additional coding… Something like these: http://stackoverflow.com/questions/9531856/uploading-multiple-images-with-one-input-field

And this is a full description of this feature:
http://wordpress.org/support/topic/multiple-files-to-contact-form?replies=1

P.S. Thanks for a great plugin.

I did the implementation of this task, but with the limitation on amount of files. All you need to do is to predefined some set of inputs[type=”file”] in plugin’s admin, something like these:

<p class="hide">[file file-01]</p>
<p class="hide">[file file-02]<a class="del_file" href="#">del</a></p>
<p class="hide">[file file-03]<a class="del_file" href="#">del</a></p>
<p class="hide">[file file-04]<a class="del_file" href="#">del</a></p>
<p class="hide">[file file-05]<a class="del_file" href="#">del</a></p>
<a href="#" class="add_file">Add file</a>

As you can see, we have 5 inputs and a links to add and delete. Also I added some markup. Then we need to make some functionality with the help of jQuery. Something like these:

jQuery(document).ready(function(){

	//hide all inputs except the first one
	$('p.hide').not(':eq(0)').hide();

	//functionality for add-file link
	$('a.add_file').on('click', function(e){
		//show by click the first one from hidden inputs
		$('p.hide:not(:visible):first').show('slow');

		e.preventDefault();
	});

	//functionality for del-file link
	$('a.del_file').on('click', function(e){
		//var init
		var input_parent = $(this).parent();
		var input_wrap = input_parent.find('span');

		//reset field value
		input_wrap.html(input_wrap.html());

		//hide by click
		input_parent.hide('slow');

		e.preventDefault();
	});
});

Working example you can see here (form to add auto).

To megstaz
1. The first pieces of code you have to put in plugin’s admin section, where you generate input fields and so on.
2. The second pieces of code you can put directly in footer.php in your theme’s folder (but then you need to wrap the code above with <script type=”text/javascript”>…code…</script>) or you can make a separate js-file and include it in footer.php or in header.php or even in functions.php with wp_enqueue_script() function.

I also wrote a little article with some screenshots, may be it can be helpful to you – cf7-multiple-files tutorial.

Hi Kg69design and MegStaz, I would have sent a PM but that doesn’t seem to be an option on WordPress. I was hoping to get a little help. I was trying to go to the file tutorial that Kg69design put up but it looks like the page is down. I followed the instructions above but unfortunately it’s still not working. I was wondering if either of you might be able to help me. If there is a step by step that I might be able to follow. Thanks much!

Hi KG69design, I just sent you an email. The link above is not working for some reason. I did see the working example you put at the top and it’s great! Just what I’ve been looking for.

For those, who have some trouble with the script above, I posted a modified version (link above to the tutorial) that works fine if your theme use jQuery.noConflict() somewhere (WordPress by default include it in jquery.js).

Hello KG69Design

Thanks a lot for the code that you have given for the multiple file upload for the ContactForm 7 plugin. Would be glad if you can help me with a requirement – Is it possible to show the thumbnails for the images uploaded ?

Regards
Rains