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, Jun 10 '12 at 15:40
You definitely do not need an iframe. Post via ajax works just fine. — floriank, Jun 10 '12 at 23:51
burzum - you can't post files with Ajax. http://stackoverflow.com/a/166267/7032 — RichardAtHome, Jun 11 '12 at 08:29

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

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

edited May 23 '17 at 12:06

Community

1
1

answered Jun 11 '12 at 08:31

RichardAtHome

4,293
4
20
29

1

you know any cakephp plugin or something that can be utilized with the forms so that the integration will be much for easy – Happy Coder Jun 11 '12 at 09:55
I've had some success using the jQuery uplodify plugin ( http://www.uploadify.com/ ) . Warning - it DOES work, but it's a real pain to debug the flash stuff :-( – RichardAtHome Jun 12 '12 at 16:29
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 – Happy Coder Jun 12 '12 at 16:50

score 0 · Answer 2 · answered Jun 15 '12 at 21:40

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 '12 at 21:40

Suman

9,221
5
49
62

score 0 · Answer 3 · answered Nov 22 '17 at 07:12

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>

CakePHP Ajax form submission with File Upload

3 Answers3