Cakephp form pass upload file to controller via ajax

Question

I have a form which is created using cakephp form builder, this form has a couple of file upload fields as below:

<?php echo $this->Form->create('application', array('type' => 'file', 'url' => array('app' => true, 'controller' => 'jobs', 'action' => 'save_new_application'), 'id' => 'create-application-form'));

    echo '<p>'.$this->Form->input('cv', array('type' => 'file', 'label' => "Upload CV (Required)", 'required' => true)).'</p>';
    echo '<p>'.$this->Form->input('cover-letter', array('type' => 'file', 'label' => "Upload Cover Letter (optional)")).'</p>';
    echo $this->Form->input('campaignid', array('type' => 'hidden', 'class' => 'form-control sendid', 'label' => false,  'value' => $campaignid));
    echo $this->Form->input('profileid', array('type' => 'hidden', 'class' => 'form-control sendid', 'label' => false,  'value' => $profileid));
    echo $this->Form->submit('Apply', array('class' => 'form-control')); ?>

<?php echo $this->Form->end(); ?>

I however need this form to be submitted via ajax so that the page doesnt refresh, as with other forms on the site I have the below jquery, however the controller only gets the two hidden fields and no information about the upload files.

$('#create-application-form').off().on('submit', function(e){
            e.preventDefault();
            $.ajax({
                url: '/app/jobs/save_new_application/',
                dataType: 'json',
                method: 'post',
                data:  $(this).serialize()
            })
                .done(function(response) {
                    //show result
                    if (response.status == 'OK') {

                    } else if (response.status == 'FAIL') {

                    } else {
                        //show default message
                    }
                })
                .fail(function(jqXHR) {
                    if (jqXHR.status == 403) {
                        window.location = '/';
                    } else {
                        console.log(jqXHR);

                    }
                });

        });

What do i need to change in the ajax call to be able to pass the actual file data to the controller so the files can be saved on the server?

possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — ndm, Jul 21 '15 at 15:37

Bhavin Solanki · Accepted Answer · 2015-07-21T16:02:51.190

2

You have to send New FormData() object to send file using ajax

Updated code

   $('#create-application-form').off().on('submit', function(e){
        e.preventDefault();
        var formdatas = new FormData($('#create-application-form')[0]);
        $.ajax({
            url: '/app/jobs/save_new_application/',
            dataType: 'json',
            method: 'post',
            data:  formdatas,
            contentType: false,
            processData: false
        })
            .done(function(response) {
                //show result
                if (response.status == 'OK') {

                } else if (response.status == 'FAIL') {

                } else {
                    //show default message
                }
            })
            .fail(function(jqXHR) {
                if (jqXHR.status == 403) {
                    window.location = '/';
                } else {
                    console.log(jqXHR);

                }
            });

    });

edited Jul 21 '15 at 16:02

answered Jul 21 '15 at 15:09

Bhavin Solanki

4,740
3
26
46

This gives me: Uncaught TypeError: Illegal invocation – DevWithZachary Jul 21 '15 at 15:16
i have update my ajax call, please check it and let me know... also in your controller try print_r($_FILES); die; – Bhavin Solanki Jul 21 '15 at 16:03
it passes the file data but does not include the hidden fields now – DevWithZachary Jul 21 '15 at 17:15
for data you need to use print_r($_POST); so basically data will from print_r($_POST); and file data print_r($_FILES) – Bhavin Solanki Jul 21 '15 at 17:17
@ZacPowell for cakephp you can use `$this->data` to get user data – Bhavin Solanki Jul 21 '15 at 17:19
if it still not work then change `$('#create-application-form')[0]` **TO** `$('#create-application-form')` – Bhavin Solanki Jul 21 '15 at 17:20

Cakephp form pass upload file to controller via ajax

1 Answers1