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>

Silly question, but are you uploading the images, then manually browsing to http:// .. ../../../controllers/ajax_controller.php to view the dumps? — Drakes, Apr 10 '15 at 18:46
as in via a php request? no. the var_dump() is actually echoed back to the browser console — Edward, Apr 10 '15 at 18:47

score 1 · Answer 1 · answered Apr 10 '15 at 18:51

1

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

Hope this would help you

answered Apr 10 '15 at 18:51

Ashwani Goyal

616
4
18

Hi, Thanks for your reply, i have tried this still now i am getting: `
```
array (size=1)
  'file' => string 'undefined' (length=9)
```
`
– Edward Apr 10 '15 at 18:55
#2 didn't help ? This one is the necessary part as well – Ashwani Goyal Apr 10 '15 at 18:57
Yes it helped i think because now i am getting 'undefined' rather than just 'empty' – Edward Apr 10 '15 at 18:59
I think you should try `$("#logo_location").val()` instead of `$("#logo_location").get(0).files` – Ashwani Goyal Apr 10 '15 at 19:08
I tried this, I now get 'C' instead of 'undefined'... this is from `var_dump($_POST)` by the way. – Edward Apr 10 '15 at 19:10
Turns out that 'C' is part of 'C:\fakepath\IMG_0061.JPG' as i was looking at `file_data[0]` not just `file_data` and although having the file name is very nice... where is the damn data? because its certainly not in $_FILES global. – Edward Apr 10 '15 at 19:20
The form's attributes are totally irrelevant in ajax. – Musa Apr 10 '15 at 19:23
I thought this but didn't want to argue. as i was being helped :) – Edward Apr 10 '15 at 19:24
`data : new FormData($("#logo_location")[0])` this can help – Ashwani Goyal Apr 10 '15 at 19:27
Wish it could but we're back to empty now :( – Edward Apr 10 '15 at 19:32
This would help you http://runnable.com/UZKDAYo3XEw2AACX/how-to-upload-a-file-using-jquery-for-php – Ashwani Goyal Apr 11 '15 at 05:19

Musa · Accepted Answer · 2015-04-10T19:36:55.193

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({
    ...

edited Apr 10 '15 at 19:36

answered Apr 10 '15 at 19:30

Musa

96,336
17
118
137

This was the way i thought it was supposed to be done but still nothing. I will double check now. How can i make sure that `formData` contains any data? – Edward Apr 10 '15 at 19:39
There is no way to, you can check your network tab in your developer tools to see what the browser sends though. – Musa Apr 10 '15 at 19:41
Ok that is extreamly useful, this is what chrome says was sent: `------WebKitFormBoundarysPx8WQQBwHAQAkPc Content-Disposition: form-data; name="file"; filename="IMG_0061.JPG" Content-Type: image/jpeg ------WebKitFormBoundarysPx8WQQBwHAQAkPc--` so i guess the image was sent? Now why is my script not receiving it :| – Edward Apr 10 '15 at 19:45
No it still dumps an empty array – Edward Apr 10 '15 at 20:16
This is the correct answer, after checking upload without ajax I found the image I was uploading was too large! – Edward Apr 12 '15 at 14:08

score 0 · Answer 3 · answered Apr 10 '15 at 18:46

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
});
});

Image Upload to PHP Via Ajax

3 Answers3