JSFiddle - React, Tailwind, and code Playground

HTML

<!-- "/MyController/MyAction" is a basic controller. It calls a DAL method in order to save the model in DB. PAY ATTENTION IF YOU CLICK IT ON JSFIDDLE, it crashes the Result window (I don't know what to write in the <form action=""> jsfiddle to reproduce the post action -->
<form action="/MyController/MyAction" enctype="multipart/form-data" id="target-form" method="post">
    <input id="Files_1__File" type="file" value="" name="Files[1].File"></input><br />
    <input id="Files_2__File" type="file" value="" name="Files[2].File"></input><br />
    <input id="Files_3__File" type="file" value="" name="Files[3].File"></input><br />
    
    <div id="progressbar" class="progressbar">
        <div id="progresslabel" class="progressbarlabel"></div>
    </div>
    
    <p>
        <input type="submit" value="Create"/>
    </p>
</form>

CSS

.progressbar {
  width:300px;
  height:21px;
}

.progressbarlabel {
  width:300px;
  height:21px;
  position:absolute;
  text-align:center;
  font-size:small;
}

JavaScript

//Trying to adapt http://www.dotnetbips.com/articles/859d32c8-945d-4e5d-8c89-775388598f62.aspx

$("#target-form").submit(function (evt) {      
    console.log("cliqué");
    var xhr = new XMLHttpRequest();
    var data = new FormData();
    var nbFiles = $("input[type=file]").length;
    for(var i = 0 ; i < nbFiles ; i++)
    {
        //If the user chooses an image for this fields
        if($("#Files_"+i+"__File").get(0).files.length > 0)
        {
            //Get the files to upload
            var files = $("#Files_"+i+"__File").get(0).files;
            data.append(files[0].name, files[0]);
        }
    }
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            var progress = Math.round(evt.loaded * 100 / evt.total);
            $("#progressbar").progressbar("value", progress);
        }
    }, false);
    xhr.open("POST", "@Url.Action("MyAction", "MyController")");
    xhr.send(data);
    
    $("#progressbar").progressbar({
        max: 100,
        change: function (evt, ui) {
            $("#progresslabel").text($("#progressbar").progressbar("value") + "%");
        },
        complete: function (evt, ui) {
            $("#progresslabel").text("File upload successful!");
        }
    });
    //If I comment it, "File upload successful!" appears, but in reality, the form isn't submitted (so the files aren't too). If I uncomment it, the form is submitted but the progressBar just appears (it is never incremented, so it is totally useless.)
    evt.preventDefault();
});