JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>JSLoader</title>
</head>
<body>
<input id="input_file" type="file" multiple/>
<div id="button"></div>
</body>
</html>

CSS

#input_file{
    position:absolute; 
    top:-999px; 
    visibility:hidden
}

#button { 
    width: 150px; 
    height:150px; 
    border-radius: 10px;
    background-color: green;
}

JavaScript

var input = document.querySelector("#input_file");
var btn = document.querySelector("#button");
var cv = document.createElement("canvas");
var cvContext = cv.getContext("2d");

var files;
var reader = new FileReader();
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
var getBuffer = GetBufferFunc();
var f_index = 0;

btn.onclick = function () {
    input.click();
};

input.onchange = function () {
    files = input.files;
    loadFile();
};

reader.onload = function (e) {
    var im = new Image();
    
    im.onload = function (e) {

        var blobData = [];
        var form;
        var current = files[f_index];
        var names = [encodeURI(current.name), encodeURI('100_100_' + current.name)];

        if (window.FormData) {
            blobData[0] = current;
        }
        else {
            cv.width = im.width;
            cv.height = im.height;
            cvContext.drawImage(im, 0, 0);
            blobData[0] = getBuffer(cv, current.type, names[0]);
        }

        cv.width = 100;
        cv.height = 100;
        cvContext.drawImage(im, 0, 0, 100, 100);
        blobData[1] = getBuffer(cv, current.type, names[1])

        var xhr = new XMLHttpRequest();

        xhr.open("POST", "load.php", true);

        xhr.onload = function () {
            console.log(this.response);
            f_index++;
            loadFile();
        }
            
        xhr.onerror = function(){
            console.log('error upload');
            f_index++;
            loadFile(); 
        }

        if (xhr.upload) {
            xhr.upload.onprogress = function (e) {
                console.log(e.position / e.totalSize) * 100;
            }
        }

        if (window.FormData) {
            form = new FormData();

            for (var i = 0; i < blobData.length; i++) {
                form.append(names[i], blobData[i]);
            }
        }
        else {
            var fBuilder = new FormBuilder();

            for (var...