upload file from adding a custom step on checkout onepage

Question

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.

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

Answer 1

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) {

    }
});

Answer 2

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