CakePHP Ajax form submission with File Upload

Question

I am using cake PHP file upload with the AJAX form submit. But it is not wotrking. There is nothing in the $_FILES array. But When I use normal form submit, it is working fine without any issue. I am using the following code for form submit using AJAX

    echo $this->Form->create('AlbumDetail',array('enctype' => 'multipart/form-data','type'=>'file'));

    echo $form->input('Image',array("type" => "file"));  

    echo $ajax->submit('Add Album', array('url'=> array('controller'=>'album_details', 'action'=>'addalbum'), 'update' => 'album_update'));

While ,

echo $this->Form->create('AlbumDetail', array('enctype' => 'multipart/form-data', 'controller' => 'album_details', 'action' => 'addalbum', 'type' => 'file'));

echo $form->input('Image',array("type" => "file")); 

echo "<input name='submit' type='submit' value='Add Album'>";

is working without any problem and $_FILES array is returning values. Can anyone do a little help ...?

There is no proper way to upload files over ajax. If you don't want to refresh the page and still upload a file, you will have to use an iframe. — void0
– void0, Commented Jun 10, 2012 at 15:40
You definitely do not need an iframe. Post via ajax works just fine. — floriank
– floriank, Commented Jun 10, 2012 at 23:51
burzum - you can't post files with Ajax. stackoverflow.com/a/166267/7032 — RichardAtHome
– RichardAtHome, Commented Jun 11, 2012 at 8:29

Community · Accepted Answer · 2017-05-23 12:06:04Z

2

As mentioned by void0, you cannot post a file using Ajax. This similar question has some workarounds and suggested libraries.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jun 11, 2012 at 8:31

RichardAtHome

4,3134 gold badges23 silver badges29 bronze badges

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

3 Comments

Happy Coder Over a year ago

you know any cakephp plugin or something that can be utilized with the forms so that the integration will be much for easy

RichardAtHome Over a year ago

I've had some success using the jQuery uplodify plugin ( uploadify.com ) . Warning - it DOES work, but it's a real pain to debug the flash stuff :-(

Happy Coder Over a year ago

I have done this using a hidden iframe. Seems like it is pretty easy than other stuffs. So this will show validation also without using AJAX

Suman · Accepted Answer · 2012-06-15 21:40:30Z

0

Have a look at this CakePHP plugin: https://github.com/srs81/CakePHP-AjaxMultiUpload

I think this may be exactly what you are looking for.

answered Jun 15, 2012 at 21:40

Suman

9,6215 gold badges52 silver badges65 bronze badges

Comments

danny3b · Accepted Answer · 2017-11-22 07:12:07Z

It is possible now.

This is how I accomplished that. First of all I'm using Uploadable Behavior for handling files uploading from: https://github.com/cakemanager/cakephp-utils

Model:

$this->addBehavior('Utils.Uploadable', [
       'file' => [
       'removeFileOnUpdate' => false,
       'field' => 'file_tmp',
       'path' => dirname(ROOT).'{DS}invoices{DS}', 
       'fileName' => '{field}'
       ]
    ]);

Controller:

public function ajaxInvoice() {

    if ($this->request->is('ajax')) {
        $this->autoRender = false;
        $this->Invoices->deleteAll(['order_id' => $this->request->data['order_id']]);

        $invoice = $this->Invoices->newEntity();

        $invoice->order_id = $this->request->data['order_id'];
        $invoice->file_tmp = $this->request->data['file']['name'];

        $invoice = $this->Invoices->patchEntity($invoice, $this->request->getData());

        $this->Invoices->save($invoice);
        $this->response->body($invoice);

    }
}

Template:

<?php use Cake\Routing\Router; ?>

<input type="file" class="upload<?= $id ?> hidden"><a data-id="<?= $id ?>" class="upload">Upload</a>

<script type = "text/javascript" > $(document).ready(function() {
    $('.upload').on('click', function() {
        var id = $(this).attr('data-id');
        $('.upload' + id + '').click();
        $('.upload' + id + '').change(function(e) {
            e.stopImmediatePropagation();
            var form = new FormData();
            form.append('file', $(this)[0].files[0]);
            form.append('order_id', id);
            $.ajax({
                type: "POST",
                url: '<?php echo Router::url(array('controller ' => 'Invoices ', 'action ' => 'ajaxInvoice ')); ?>',
                data: form,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data, status, xhr) {
                    var response = JSON.parse(xhr.responseText);
                },
            });
        });
    });
}); 
</script>

Collectives™ on Stack Overflow

CakePHP Ajax form submission with File Upload

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related