Cakephp FormData Ajax file upload - ajax

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"> </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