Can't upload file with ajax and Magento 1.9

Question

I have a form with 3 input file, and I need to upload their files without reload the page. I use formData object but when I take params in Magento controller it return [native code]...

opcheckout.js :

save: function () {
 var form = $$('#form-doc-popin')[0];
 var formData = new FormData(form);
 if (checkout.loadWaiting != false) return;
 // checkout.setLoadWaiting('review');
 var params = '';
 if (this.agreementsForm) {
 params += '&' + Form.serialize(this.agreementsForm);
 }
 params += '&' + Form.serialize('co-payment-form');
 var validator = new Validation('co-payment-form');
 params.save = true;
 formData.append('params', params);
 if (payment.validate() && validator.validate()) {
 checkout.setLoadWaiting('checkout-step-billing', false, true);
 var request = new Ajax.Request(
 this.saveUrl,
 {
 method: 'post',
 parameters: formData,
 onComplete: this.onComplete,
 onSuccess: this.onSave,
 onFailure: checkout.ajaxFailure.bind(checkout)
 }
 );
 }

OnepageController.php :

 public function saveOrderAction()
{
 if (!$this->_validateFormKey()) {
 $this->_redirect('*/*');
 return;
 }
 if ($this->_expireAjax()) {
 return;
 }
 $result = array();
 //
 // Upload doc if order weapons
 //
 /* get order id */
 $quoteId = $this->getOnepage()->getQuote()->getId();
 $folder = Mage::getBaseDir('media') . DS . 'downloadable' . DS . 'doc_armes' . DS . $quoteId;
 $data = $this->getRequest()->getParams();
 var_dump($data);
 try {
 $uploader = new Varien_File_Uploader('attachment');
 $uploader->setAllowedExtensions(array('doc', 'docx', 'pdf'));
 $uploader->setAllowRenameFiles(true);
 $uploader->setFilesDispersion(false);
 if (!is_dir($folder)) {
 mkdir($folder, 0777, true);
 }
 $uploader->save($folder, $data);
 $newFilename = $uploader->getUploadedFileName();
 } catch (Exception $e) {
 $error = true;
 }

and var_dump($data) return :

enter image description here

I don't know how to get all files...

Thanks for help !

• kunj: Use $_FILES to get uploading file data.
• TheThing: $_FILES return an empty array

Answer 1

You can not achieve this via Magento prototype.js file

You have to make some customization in js file

you can try below code to upload file, data via js and submit.

document
 .querySelector('#testForm')
 .addEventListener('submit', function processForm(e) {
 e.preventDefault();
 console.log('processForm');
 var form = e.currentTarget;
 var formData = new FormData();
 Array.prototype.forEach.call(
 form.querySelectorAll('input[type=file]'),
 function (input, i) {
 // use the input name, don't invent another one
 if (input.value) formData.append(input.name, input.files[0]);
 }
 );
 var request = new XMLHttpRequest();
 // use the form info, don't couple your JS with an end-point
 request.open(form.method, form.action);
 // want to distinguish from non-JS submits?
 request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 request.send(formData);
 request.onload = function(e) {
 console.log('Request Status', request.status);
 };
 })
;

You can follow below link also.

How can i upload a file using prototype js ajax call

Answer 2

Use

$uploader->save($folder, $_FILES['attachment']['name'])

instead of

$uploader->save($folder, $data);