Cakephp FormData Ajax file upload

Question

I'm stuck in uploading from data and file using FormData + Ajax + CakePHP

Here is my form:

        <form name="multiform" class="frmaddproduct" action="addproduct" method="POST" enctype="multipart/form-data">

        <div class="formrow">
            <div class="createproductlabel leftfloat">Name</div>
            <div class="formcontrol leftfloat"><input type="text" name="name"/><br/><span>Name?</span></div>
            <div class="clear"></div>
        </div>

        <div class="formrow">
            <div class="createproductlabel leftfloat">Cost</div>
            <div class="formcontrol leftfloat"><input type="text" name="cost"/></div>
            <div class="clear"></div>
        </div>

        <div class="formrow">
            <div class="createproductlabel leftfloat">Discount</div>
            <div class="formcontrol leftfloat"><input type="text" name="discount" class="discount" maxlength="5"/> %</div>
            <div class="clear"></div>
        </div>

        <div class="formrow">
            <div class="createproductlabel leftfloat">Description</div>
            <div class="formcontrol leftfloat"><textarea name="description" rows="5"></textarea></div>
            <div class="clear"></div>
        </div>

        <div class='formrow'>
            <div class='createproductlabel leftfloat'>Choose file</div>
            <div class='formcontrol leftfloat'><input type='file' name=''productpicture'/></div>
            <div class='closephotos leftfloat'><img src='../img/close.png' class='closeproductpicture'/></div>
            <div class='clear'></div>
        </div>

        <div class="formrow">
            <div class="createproductlabel leftfloat">&nbsp;</div>
            <div class="formcontrol leftfloat"><input type="button" name="btncreateproduct" value=" Create Product "/></div>
            <div class="clear"></div>
        </div>
        </form>

Here is my code for submitting this form:

$(".frmaddproduct").submit(function(e)
{
            var formObj = $(this);
            var formURL = formObj.attr("action");

        if(window.FormData !== undefined)  // for HTML5 browsers
            {

                var formData = new FormData(this);

                $.ajax({
                    url: formURL,
                    type: 'POST',
                    data:  formData,
                    mimeType:"multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data, textStatus, jqXHR)
                    {
                            $("#multi-msg").html('<pre><code>'+data+'</code></pre>');
                    },
                    error: function(jqXHR, textStatus, errorThrown) 
                    {
                        $("#multi-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus='+textStatus+', errorThrown='+errorThrown+'</code></pre>');
                    }           
               });
                e.preventDefault();
                e.unbind();
           }
           else  // for older browsers
            {
                // generate a random id
                var  iframeId = 'unique' + (new Date().getTime());

                // create an empty iframe
                var iframe = $('<iframe src="javascript:false;" name="'+iframeId+'" />');

                // hide it
                iframe.hide();

                // set form target to iframe
                formObj.attr('target',iframeId);

                // Add iframe to body
                iframe.appendTo('body');
                iframe.load(function(e)
                {
                    var doc = getDoc(iframe[0]);
                    var docRoot = doc.body ? doc.body : doc.documentElement;
                    var data = docRoot.innerHTML;
                    $("#multi-msg").html('<pre><code>'+data+'</code></pre>');
                });

            }
});

In firebug, I can see data being sent:

-----------------------------2463414040929 Content-Disposition: form-data; name="categoryproduct" 1 -----------------------------2463414040929 Content-Disposition: form-data; name="companyproduct" 1 -----------------------------2463414040929 Content-Disposition: form-data; name="name" AAA -----------------------------2463414040929 Content-Disposition: form-data; name="cost" 34

But when I try to read or dump request data in Controller, I get: Array()

i.e. No data being sent

debug($this->request->data);

also, $this->log($this->request->data["discount"]) gives me blank value

Please help me out on this.

I'm confused where I'm getting it wrong

I didn't used cakephp form helpers to create form

Answer 1

USE the regular $_FILES PHP Server variable