Passing an Image with Ajax

Question

HTML form for uploading an Image:

<form method="post" enctype="multipart/form-data">
<div>
<input type="file" id="image">
<button type="button" class="ImgSubmitButton" onclick="uploadImages();">UPLOAD IMAGE</button>
</div>
</form>

Javascript/Ajax for sending the data.

var RequestObject = false;
if (window.XMLHttpRequest) {
    RequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    RequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function uploadImages() {
    if (RequestObject) {
        var formData = new FormData();
        var myfile = document.getElementById('image').files[0];
        formData.append('file', myfile);
        RequestObject.open("POST", "processFileA.php");

        RequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        RequestObject.onreadystatechange = function() {
            if (RequestObject.readyState == 4 && RequestObject.status == 200) {
                document.getElementById('err').innerHTML = RequestObject.responseText;
            }
        }
        RequestObject.send("data=" + formData);
    }
    return false;
}

PHP is simple just to check if the data is set.

if(isset($_POST['data'])){ 
echo $_POST['data'];
echo "data is set";
} else {
echo "data is not set";
}

I've checked 3 header requests.

First:the data isn't set.

RequestObject.setRequestHeader('Content-Type','multipart/form-data');

Second:the data isn't set.

RequestObject.setRequestHeader('Content-Type', "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2));

Third:returns this [object FormData].

RequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

I have also tried no header requests and data isn't set.

I know how to safely process the form through regular form submit with PHP, but not sure how to handle [object FormData] as it is passed via Ajax. If their is a better method or something I'm doing wrong please let me know. My question is how do I properly send the image file Via Ajax to process it as you would in a regular form submit to properly process it in PHP.

Please no JQuery.

Answer 1

your problem in this string:

RequestObject.send("data=" + formData);

when you try String + formData, you did concatenation, and formData convert to String to, as we know formData it's object.

this is correct approach to send data:

RequestObject.send(formData);

just send a data like in this examples: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript