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,
                }
            );
        }
    },
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) {

    }
});
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
        }
    );
}
  • I am following this method, Then how could I retrieve the file type attribute in contoller? – Butterfly Jan 2 '17 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.