JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<a href="#" id="send">Send</a>

<br>
<br>PNG Image
<br>
<img id="image" width="250" src="https://dl.dropboxusercontent.com/u/47067729/sticker.png">

JavaScript

var button = $("#send");
var file = $("#image")[0];
file.crossOrigin="anonymous";
var url = "http://confile.no-ip.biz:8080/buddyis/uploadImage/saveXhrUpload";

button.click(function () {

    var formdata = new FormData();
    formdata.append("image", file);
    var xhrNativeObject = new XMLHttpRequest();
    // Upload progress listener
    xhrNativeObject.upload.addEventListener("progress", function (event) {
        if (event.lengthComputable) {
            var position = event.loaded || event.position;
            var total = event.total;
            var xhrPercentComplete = (position / total * 100 | 0);
            console.log(xhrPercentComplete, position, total);
        }
    }, false);

    xhrNativeObject.open("post", url, true);
    xhrNativeObject.onload = function (event) {

        var targetResponse = event.currentTarget;
        if ((targetResponse.readyState == 4) && (targetResponse.status == 200)) {
            var obj = JSON.parse(targetResponse.responseText);
            console.log(obj);
        } else {
            console.log("error");
        }

    }

    // send the file
    xhrNativeObject.send(formdata);

});