Data method settings for file upload using jquery ajax

Question

So this problem stems from a lack of a good understanding of how the data method functions when using ajax. I've looked at most of the other questions about ajax on here but this part isn't clicking for me.

As an example, I'm using ajax to send form data (which includes multiple text fields and one file upload) to php. The server script then inserts the field data and file url in a sql db, then returns all those values as a json encoded array.

My current ajax script is shown below and when it's run everything works except the file upload part. The file is not getting saved to the server and of course no url is coming back. If i change:

data: data,

to

data: text,

the file upload works, the file gets saved, but then when the json array is coming back to the page i get a white screen showing the array data (it doesn't return to the page the form data is coming from).

Why is this? what is the correct data method to use to allow both my file upload to work and for the data to come back to the page it was sent from.

$("document").ready(function() {
$(".data-form").submit(function() {
        var data = new FormData();
$.each(files, function(key, value)
  { data.append(key, value);
});
    if (confirm("\t\t\tAre you ready to sumbmit this listing?\nYou can always edit the listing after going to the menu tab - edit listing."))       {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "add-list.php",
            data: data,
            processData: false,
            contentType: false,
            success: function(response) {
                      if (response.success) {
                          $("#modal1").modal('hide');
                        $("#add_frame").show();
                        $("#newbutt").show();
                        $(".atitle").html('<a href="' + response.ad_linka + '" target="_blank">' + response.titlea + '</a>');
                        $(".acomment").html(response.commenta);
                        $(".aaddress").html(response.addressa);
                        $(".asale-price").html(response.sale_pricea);
                        $(".alease-price").html(response.lease_pricea);
                        $(".alot-size").html(response.lot_sizea);
                        $(".abuilding-size").html(response.build_sizea);
                        $(".azoning").html(response.zoninga);
                        }
                      else {
                          console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
                      }
                  },
                  error: function() {
                      alert("An Error has ocurred contacting the server. Please contact your system administrator");
                  }
              });
        return false;
    }
});
});

Answer 1

You need to tell jquery to stop process your data

     processData: false, // Don't process the files
    contentType: false, // defaults to 'application/x-www-form-urlencoded; charset=UTF-8'

You didn't send how you construct the data but something like this should work

    var data = new FormData();
    $.each(files, function(key, value)
      { data.append(key, value);
    });