Solspace FreeForm : How to send file via Ajax with FreeForm

Question

I have forms made with FreeForm Pro on a website (some with Composer, others by the Template way) that are validated and sent by Ajax. I followed the code given on Solspace documentation.

Here's my code :

<script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

<script type="text/javascript">
    jQuery(function($){
        var $form            = $('#ajax_form');

        $form.submit(function(e){
            //hide all errors
            $('.error_message').hide().html('');

            //jquery ajax shortcut
            $.post(
                //form url (Freeform autodetects ajax)
                $form.attr('action'),
                //form params
                $form.serialize(),
                //data handler
                function(data)
                {
                    // -------------------------------------
                    //    `data` is a json string that jQuery
                    //    automatically detects and converts.
                    //    data {
                    //        //posting successful?
                    //
                    //        "success" : true/false,
                    //
                    //        //object containing error messages
                    //        //if success is false
                    //        //multiple error messages are an array
                    //        //single error messages are a string
                    //
                    //        "errors"    : {
                    //            "field_name1"    : 'single error message',
                    //            "field_name2"    : [
                    //                'multiple error messages',
                    //                'for the same field'
                    //            ]
                    //        }
                    //
                    //        //the return url of return="" if set, or this current url
                    //
                    //        "return_url"    : "http://yoursite.com/return/segment/"
                    //    }
                    // -------------------------------------
                    if (data.success == false)
                    {
                        //data.errors
                        $.each(data.errors, function(i, item){

                            var $errorHolder = $('[name="' + i + '"]').
                                                    parent().find('.error_message');
                            var error         = ($.isArray(item) ? item.join('<br/>') : item);

                            //does the error holder field exist?
                            if ($errorHolder.length > 0)
                            {
                                $errorHolder.append('<p>' + error + '</p>').show();
                            }
                            //lets add it to general errors
                            else
                            {
                                $generalErrors.append('<p>' + error + '</p>').show();
                            }
                        });
                    }
                    else if (data.success)
                    {
                        $('#ajax_form').hide().html('');
                        $('.message_success').slideDown();
                    }
                }
            );

            e.preventDefault();
            return false;
        });
    });
</script>

The thing is : when I add a file field to the form, the form is sent but the file is not attached to the mail and not saved in the database. I searched everywhere to fix this but have issues to do it. Asked Solspace (they send me this link : http://hayageek.com/jquery-ajax-form-submit/#multipart-form to help me but I can not apply it to my form).

Does anyone has a clue for me please?

Versions used : FreeForm Pro 4, EE 2.8.2

Answer 1

The documentation code is an example, and therefore may need tweaking for fit your particular goals.

File fields are different from "regular" fields, since no text or data is present inside the field when submitting, as you would have it with text fields for example. The above code simply serializes the form's text data to be sent through ajax, and therefore the file attachment is not part of the submitted data. That also means no file is saved in the database, and no file attachment is sent with a notification email.

The link you provided ended with this comment:

Same functionality you can get by using Ajax Form plugin.

I would suggest building the form using this Ajax Form plugin. It's a fairly popular plugin, and has been around for a long time. The following is a very old forum discussion about using this plugin with Freeform 3.x (could be used with any form using files, really), http://www.solspace.com/forums/viewthread/666/ Hopefully it's useful information in addition to the plugin's official documentation.