JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Instructions:</h1>
<p>
First, browse for an image using the first file input only. It will be redrawn in two canvases. Then ajax submit the form, and check your console log to verify that the second file input was set via <code>FormData</code> and check and network request payload (you should note that <code>thumb0</code> is empty, and <code>image0</code> payload has not been updated to a 30px image.
</p>

<form id="myform">
<input id="image0" name="image0" type="file" />
<label for="image0">image0</label>
<input id="image0" name="thumb0" type="file" />
<label for="thumb0">thumb0</label>
</form>
<canvas id="ic0" width="50" height="50"></canvas>
<canvas id="tc0" width="20" height="20"></canvas>
<br>
<button id="button-submit">Ajax submit</button>

CSS

canvas{
  border: 1px solid #000;
}

JavaScript

function ajaxSubmit(){
    var fd = new FormData(document.forms[0]);
    ic0.toBlob(
        function(blob){
            fd.set("image0", blob, "image0.jpg");
        }, "image/jpeg", 0.7);
    tc0.toBlob(
        function(blob){
            fd.set("thumb0", blob, "thumb0.jpg");
            console.log(blob);
            console.log("Just blobbed thumb0");
        }, "image/jpeg", 0.7);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/ajax-upload/", true);
    //xhr.setRequestHeader("X-CSRFToken", csrftoken);
    xhr.send(fd);
}

function handleFiles(e){
    var img = new Image;
    img.onload = function(){
        var width = 30;
        var height = img.height * 30/img.width;
        e.target.ic0.width = width;
        e.target.ic0.height = height;
        e.target.tc0.width = width/2;
        e.target.tc0.height = height/2;
        var ctx = e.target.ic0.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        ctx = e.target.tc0.getContext("2d");
        ctx.drawImage(img, 0, 0, width/2, height/2);
    };
    img.src = URL.createObjectURL(e.target.files[0]);
    //clean up to prevent memory leak
    URL.revokeObjectURL(img.src);
}

//bind the canvas to the element as a parameter
document.getElementById('image0').ic0 = ic0;
document.getElementById('image0').tc0 = tc0;

document.getElementById('image0').addEventListener('change', handleFiles);
document.getElementById('button-submit').addEventListener('click', ajaxSubmit);