Uploading files using FormData, AJax and CakePHP

Question

Okay, so all in all, I'm trying to upload a single file via ajax using FormData and a CakePHP form. The problem is that trying to catch the data by error logging the $this->request->data in the controller returns an empty files array.

So, I've set up my form, using CakePHP's helper. But the structure of that isn't really relevant. The javascript used will output whatever debugging we need.

So here's the setup. I have a controller called RequestsController and my view name/function is upload_files.

The piece of javascript code looks like this. A note, this is called when the value of the file input element changes (i.e once they've selected a file to upload)

plugin.fileUpload = function(el)
    {
        el = $(el);

        form = el.closest('form');

        var files = el.get(0).files;

        console.log(files.length)

        var formData = new FormData();

        for (var i = 0; i < files.length; i++) 
        {
            var file = files[i];

            console.log(file);

            formData.append('files[]', file, file.name);
        }

        formData.append("username", "[email protected]");

        var xhr = new XMLHttpRequest();

        xhr.open('POST', form.attr('action'), true);

        xhr.onload = function () {
            if (xhr.status === 200) {
                toastr.success('Successfully loaded');
            } 
            else 
            {
                alert('An error occurred!');
            }
        };

        xhr.send(formData);

        console.log(files);
        console.log(formData);
    }

Excuse all the console logs. It's for the purpose of showing the output and debugging.

You'll see I also append a username field just to test that the post was making it with some data intact to the controller. It is indeed. Here's the output from logging the $this->request->data array:

2014-06-18 17:51:41 Error: RequestsController::upload_files - Line 45
2014-06-18 17:51:41 Error: Array
(
    [username] => [email protected]
)

As you can see, username field goes through but not the files.

I've also logged the files variables in JS to the console and it looks great. In Firebug it looks like this:

 FileList { 0=File, length=1, item=item(), more...}

Logging the the FormData variable to the console looks like this:

FormData { append=append()}

Sigh, nothing in the FormData output suggests that the files are making it to the FormData object.

Any ideas??

Kyle O'Brien · Accepted Answer · 2014-06-18 20:29:56Z

0

Ah, this was a definite gotcha

Accessing uploaded files via the FormData in the controller is like accessing files in any PHP script with any form submission.

It would seem that, in order for me to manipulate these files, I needed to access them with the normal $_FILES variable.

So, logging in my controller now looks something like this:

function upload_files()
{
    if($this->request->is('post'))
    {
        CakeLog::write('error', print_r($_FILES, true));
    }
}

And we get a nice, healthy looking array of files that look like this:

2014-06-18 22:13:29 Error: Array
(
    [files] => Array
        (
            [name] => ReadMe.txt
            [type] => text/plain
            [tmp_name] => /tmp/phpOUTn8l
            [error] => 0
            [size] => 3627
        )

)

answered Jun 18, 2014 at 20:29

Kyle O'Brien

9521 gold badge11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uploading files using FormData, AJax and CakePHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related