0

I have created a new step after payment on checkout onepage and form in this step contains a file type element. I have to upload a file and save file using Ajax. I'm using the formData object in my js file to get the file details in $_FILES array in php but it's not working. Doing simply like this in my js file.

checkout onepage

save: function () { //verifyStep = document.getElementById('verify-step').value; var formElement = document.getElementById("co-verify-form"); var formData = new FormData(formElement); console.log(formElement); if (checkout.loadWaiting != false) return; if (this.validate()) { checkout.setLoadWaiting('verify'); var request = new Ajax.Request( this.saveUrl, { method: 'post', onComplete: this.onComplete, onSuccess: this.onSave, onFailure: checkout.ajaxFailure.bind(checkout), parameters: formData, } ); } },
Improve this question

2 Answers 2

Reset to default
0

This one also worked for me:

var formData = new FormData(); formData.append('filename', jQuery('input[type=file]')[0].files[0]); jQuery.ajax({ type: 'POST', url: this.uploadUrl, data: formData, contentType: false, cache: false, processData: false, success: function (response) { } });
Improve this answer
0

I could solve the problem by using xmlHttpRequest object by putting it on some condition because in Age verification step there are 3 substeps and on third step, there is a file upload option I used. So i just put it only under step 3. but didn't find any solution to get content of file element of form using formData with magento's default prototype.js. Following is the code.

if (this.validate()) { if (verifyStep.value == '3') { var formElement = document.getElementById("co-verify-form"); var formData = new FormData(formElement); var request = new XMLHttpRequest(); request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) { alert('File uploaded Successfully'); } }; request.open("POST", this.uploadUrl, true); request.send(formData); } checkout.setLoadWaiting('verify'); var request = new Ajax.Request( this.saveUrl, { method: 'post', onComplete: this.onComplete, onSuccess: this.onSave, onFailure: checkout.ajaxFailure.bind(checkout), parameters: Form.serialize(this.form), //postBody: formData } ); }
Improve this answer
1
  • I am following this method, Then how could I retrieve the file type attribute in contoller? Commented Jan 2, 2017 at 12:21

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.