JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="file" name="uploads[]" multiple />
    <input type="submit" value="upload" />
</form>

CSS

form {
    border: 1px solid red;
}

JavaScript

// This test require that browser support FormData and XHR 2
$('form').submit(function () {
    $(':file', this).each(function () {
        var fd = new FormData();
        var fieldname = $(this).attr('name');
        for(var i = 0; i < this.files.length; i++) {
            fd.append(fieldname, this.files[i]);
        }
        
        var expectedData = 'pass';
        fd.append('html', expectedData);
        $.ajax({
            async : true,
            processData : false,
            /* Uncomment below and look in http headers at content-type and see the different.
               if it can send "multipart" without the comma in front it would have uploaded a file. */
            //contentType: '',
            type: 'post',
            url: '/echo/html/',
            data: fd,
            success: function (data, status, xhr) {
                console.log(data);
            }

        });
    });
    return false;
});