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? — ndm
– ndm, Commented Jul 21, 2015 at 15:37

Bhavin Solanki · Accepted Answer · 2015-07-21 16:02:51Z

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, 2015 at 16:02

answered Jul 21, 2015 at 15:09

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

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

6 Comments

DevWithZachary Over a year ago

This gives me: Uncaught TypeError: Illegal invocation

Bhavin Solanki Over a year ago

i have update my ajax call, please check it and let me know... also in your controller try print_r($_FILES); die;

DevWithZachary Over a year ago

it passes the file data but does not include the hidden fields now

Bhavin Solanki Over a year ago

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 Over a year ago

@ZacPowell for cakephp you can use $this->data to get user data

|

Collectives™ on Stack Overflow

Cakephp form pass upload file to controller via ajax

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related