File field is empty after JSON parsing on server but on client this field contains file

Question

I have a XMLHttpRequest:

chat.sendMessage = function (message) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", options["url"], true);
    console.log(message["image"]);
    xhr.send(JSON.stringify(message));
};

As you see I log image field directly before sending message. And the log writes File object in a console. But on the server side this field is empty. Why?

This is a function where I attach image to image field:

imageAddWindowSubmit.onclick = function () {
    ...
    message.addImage(chatInputImage.files[0] || "");
    if (message["text"] || message["image"]) {
       chat.sendMessage(message);
    }
}; 

AddImage method:

this.addImage = function (image) {
    this.image = image;
};

Answer 1

You have to add enctype="multipart/form-data" on your form for uploading file.

If you can use jQuery then check this link otherwise you have to add some code to handle file, check this link