Ajax Not Handling Webform File

[ben03]

Hi all,

  I am having trouble with Ajax handling an attachment in a web form. I am quite new to this so have maybe missing something faily obvious to someone else:

<form id="completeService" enctype="multipart/form-data" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

<button class="button is-link" id="submit1">Send</button>

$('#submit1').click(function(e) {
      e.preventDefault();
      var form = $('#completeService')[0];
      var data = new FormData(form);

      $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: '../../../_partial/contactForm.php',
        data: data,
        processData: false,
        contentType: false,
        success: function(response)
        {
            var jsonData = JSON.parse(response);
            if (jsonData.success == "1")
            {
              $('.notification').fadeIn(function(){
                $(this).addClass("is-success");
                $(this).text("Thank you for your interest. We will get back to you soon.");
                $(this).delay(5000).fadeOut();
              });
            }
            else
            {
              $('.notification').fadeIn(function(){
                $(this).addClass("is-danger");
                $(this).text("Something went wrong. Please try again later");
                $(this).delay(5000).fadeOut();
              });
            }
          }
      });
    });

If I include _partial/contactForm.php in the same page as the form and comment out the ajax it sends the attachment fine. The form also sends through ajax when no attachment is added. So am fairly sure the problem lies in the ajax handling the attachment. Help appreciated! 

Thanks

[dsonesuk]

As far as i can see, nothing is being sent through formData(), there is no form element with attribute name, for it to retrieve.

[ben03]

Thanks dsoneuk, I have rejiggled it slightly, and am printing formData to console. When this prints to the console, I am not sure where I should check as the object has so many levels?

$('form').submit(function(e) {
      e.preventDefault();
      var formData = new FormData(this);
      if($('#fileUpload').prop('files').length > 0)
      {
          file =$('#fileUpload').prop('files')[0];
          formData.append("attachment", file);
      }
      console.log(formData);
      
      $.ajax({
        type: "POST",
        url: '/_partial/contactForm.php',
        data: formData,
        success: function(response){

            var jsonData = JSON.parse(response);
            if (jsonData.success == "1")
            {
              $('.notification').fadeIn(function(){
                $(this).addClass("is-success");
                $(this).text("Thank you for your interest. We will get back to you soon.");
                $(this).delay(5000).fadeOut();
              });
            }
            else
            {
              $('.notification').fadeIn(function(){
                $(this).addClass("is-danger");
                $(this).text("Something went wrong. Please try again later");
                $(this).delay(5000).fadeOut();
              });
            }
          },
          cache: false,
          processData: false,
          contentType: false,
      });
      $(this).trigger("reset");
    });

The  contactForm.php sends the form data to email. This all arrives apart from the attachment. After a delayed response, this message shows in console:

Uncaught SyntaxError: Unexpected token { in JSON at position 13
    at JSON.parse (<anonymous>)
    at Object.success (contact.js:197)
    at c (jquery-3.5.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.5.1.min.js:2)
    at l (jquery-3.5.1.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2)

This is caused by this {"success":0}{"success":1}

which to me says maybe it is recognising one bit did send and one didn't?