Image Upload to PHP Via Ajax

Question

I am trying to create an image upload field in my application based on this question: Send FormData and String Data Together Through JQuery AJAX?
and this tutorial: http://www.formget.com/ajax-image-upload-php/
I have heard it is quite difficult, this is what i have tried.

HTML

<form method="POST" action="" id="logo_upload">
    <input type="file" name="logo_location" id="logo_location" enctype="multipart/form-data">
    <button type="submit" name="file_test" id="file_test">Test Upload</button>
</form>

JQuery

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data[0]);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        cache: false,
        contentType: false,
        processData: false,
        id: id
    });
});

PHP

var_dump($_FILES);
var_dump($_POST);

As you can see, I haven't got to the uploading side of things yet.

Result

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
  <i><font color='#888a85'>empty</font></i>
</pre>

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
  <i><font color='#888a85'>empty</font></i>
</pre>

I can't see what i am doing wrong, I am getting a result so it is getting to the right place, can anyone point me in the right direction?

EDIT: added #logo_upload in form var file_data = $('#logo_location')[0].files[0];
EDIT: replaced data with formData variable
EDIT: added attribute: enctype="multipart/form-data"
New Result:

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  'file' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'undefined'</font> <i>(length=9)</i>
</pre>

Answer 1

You're appending file_data[0] to the formdata object, file_data is the file not an array, use file_data.

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        contentType: false,
        processData: false,
        success: function(data){
            console.log(data);
        }
    });
});

also you can instantiate the form data object with the form in question instead of doing the append.

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
    ...

Answer 2

1. I don't see logo_upload id in your form.
2. When uploading a file enctype="multipart/form-data" is must in form attributes.
3. data parameter in your ajax getting a variable i.e. not defined. Look at your reference link once again.

Hope this would help you

Answer 3

You are passing wrong variable here and you are not defining success in your ajax request:

$('#logo_upload').submit(function(e) {
e.preventDefault();
var formData = new FormData($('#your_form_id')[0]);

$.ajax({
    url: "../../../controllers/ajax_controller.php?action=image_upload",
    type: 'POST',
    data: formData,
    success: function(result){
        alert(result);
    }
    cache: false,
    contentType: false,
    processData: false
});
});