WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Upload-attach multiple files using only 1 file input button? (15 posts)

  1. gtquila
    Member
    Posted 2 years ago #

  2. kg69design
    Member
    Posted 2 years ago #

    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.

  3. megstaz
    Member
    Posted 1 year ago #

    I would love the answer to this also :)

  4. kg69design
    Member
    Posted 1 year ago #

    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).

  5. megstaz
    Member
    Posted 1 year ago #

    Hi kg69design,

    That is exactly what i am looking for.

    Im unsure where to put the two pieces of code. For the first one do i put it where i design and create a form?

    And for the second one, i assume that goes in a .php file? But which one?

    Thanks so much for your help.

    Megan

  6. kg69design
    Member
    Posted 1 year ago #

    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.

  7. megstaz
    Member
    Posted 1 year ago #

    Thanks heaps kg69design, its working great for me :)

  8. MrMarkNeil
    Member
    Posted 1 year ago #

    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!

  9. kg69design
    Member
    Posted 1 year ago #

    Hi, MrMarkNeil
    You can write to me by email, that you can find on my site (link above to cf7-multiple-files tutorial).

  10. MrMarkNeil
    Member
    Posted 1 year ago #

    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.

  11. kg69design
    Member
    Posted 1 year ago #

    Hmmm... It is very strange because the link above works fine for me. This is it again: link to "Upload-attach multiple files" tutorial

  12. kg69design
    Member
    Posted 1 year ago #

    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).

  13. MrMarkNeil
    Member
    Posted 1 year ago #

    Hi Everyone. First I wanted to thank KG69Design for his hard work and all his help in helping me with the Multi File Upload code for Contact Form 7.

    I can confirm that the most recent code that KG69Design has posted works perfectly. Thanks again Kg69design and I will be sure to keep this thread posted if I come across any issues in the future.

  14. Rains
    Member
    Posted 1 year ago #

    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

  15. kg69design
    Member
    Posted 1 year ago #

    Everything is possible but in this case I don't know the solution.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic