File Upload with XmlHttpRequest using multer (Node, Express)

Ionic Framework ionic-v3
1

I’m trying to send a file to a Node Server via XHR with Multer.

The file is sending fine when using native FileTransfer, but for some reason it’s failing with XHR.

no matter what I do req.file is undefined.

App:

        var formData = new FormData();
        var xhr      = new XMLHttpRequest();

        formData.append("file", file, "file");

        xhr.open("POST", DataProvider.URL + path, true);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                } else {
                    console.error(xhr.statusText);
                }
            }
        };

Server

router.post('/uploadAvatar', upload.single('file'), function(req, res, next){
    console.log("Attempting upload");

    if(!req.hasOwnProperty('file')){
        return res.status(400).json({message: "upload failed"})
    }

    //console.log(req.user._id);

    return res.json({file: req.file})
})

I don’t believe it’s a CORS issue as I’m receiving the file without a problem using FileTransfer.

Any ideas would be great!