How to do an ajax submission to Craft Contact Form with attachments using FormData?

Question

JS

.on('submit', '#application-form', function(e) {
    e.preventDefault();

    var form = $(this),
        formData = new FormData(form[0]),
        msgBox = form.find('.msg-box'),
        submitBtn = form.find('.submit'),
        loader = submitBtn.find('.fa');


    submitBtn.prop('disabled', true);
    loader.css('display', 'inline-block');

    formData.append('attachment[]', form.find('#resume')[0].files[0]);
    formData.append('attachment[]', form.find('#portfolio')[0].files[0]);

    $.ajax({
        url: '/',
        type: 'post',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function(data) {
            msgBox.fadeOut(function() {
                if(data.success) {
                    $(this).text( 'Your application has been submitted!').removeClass('error');
                    form[0].reset();
                } else {
                    $(this).text('An error occurred. Please try again.').addClass('error');
                }

                submitBtn.removeAttr('disabled');
                loader.removeAttr('style');

                msgBox.fadeIn();
            });
        }
    });
})

HTML

<form id="application-form" class="content-block-lg" method="post" action="" accept-charset="utf-8" enctype="multipart/form-data">
    <div class="grid-container">
        <div class="grid-parent grid-sm-90 prefix-sm-5">
            {{ getCsrfInput() }}
            <input type="hidden" name="action" value="contactForm/sendMessage">
            <input type="hidden" name="fromEmail" value="[email protected]">
            <input type="hidden" name="subject" value="Application Form">

            <input type="text" id="address" name="address">
            <div class="grid-sm-50 content-block">
                <input type="text" name="message[Name]" placeholder="Name">
            </div>
            <div class="grid-sm-50 content-block">
                <input type="text" name="message[EmailOrPhone]" placeholder="Email or Phone">
            </div>
            <div class="grid-sm-100 content-block">
                <textarea name="message[body]" rows="3" placeholder="Tell us about you"></textarea>
            </div>
            <div class="grid-sm-100 content-block">
                <input type="text" name="message[LinkToOnlinePortfolio]" placeholder="link to online portfolio">
            </div>
            <div class="grid-sm-100 stripe-md actions">
                <span>Upload a pdf of...</span>
                <input id="resume" type="file" placeholder="resume">
                <input id="portfolio" type="file" placeholder="portfolio">
                <span>
                    <a class="btn-file" href="#resume">resume</a>
                    <a class="btn-file" href="#portfolio">portfolio</a>
                </span>
            </div>
            <div class="grid-sm-100 text-right actions">
                <button class="submit" type="submit">send <i class="fa fa-spinner fa-pulse"></i></button>
                <div class="msg-box"></div>
            </div>
        </div>
    </div>
</form>

The problem I am getting is that, with the code above, submitting the form, I get a response of the entire Homepage html. I've tried using the url set in the action hidden input, but that just gives me a 404 response. It's like it can't see the "Action" being passed in because it's in FormData?

Answer 1

I have it working now using this:

$('#Form').submit(function(ev) {
// Prevent the form from actually submitting
ev.preventDefault();

var formData = new FormData($(this)[0]);

// Send it to the server
$.ajax('/', {    
  url:  '/',
  data: formData,
  type: 'POST',
  async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function(response) {
    if (response.success) {
      alert('Thank You. Your message has been sent');
    } else {
            // response.error will be an object containing any validation errors that occurred, indexed by field name
            // e.g. response.error.fromName => ['From Name is required']
            alert('An error occurred. Please try again.');
          }
        }
      });
});

Answer 2

Here's my article about building AJAX-based contact form for Craft CMS that uses formData:

http://craftsnippets.com/articles/building-ajax-contact-form-with-craft-cms?s=s