JSFiddle - React, Tailwind, and code Playground

HTML

<form id="upload-form" name="upload-form" class="" action="<cfoutput>#event.buildLink(rc.xehImageSave)#</cfoutput>" method="post" enctype="multipart/form-data">
	<div class="fileinput-wrap">
		<label for="fileinput">Image input</label>
		<input type="file" name="file" id="fileinput" />
	</div>
	<input type="submit" id="submitter" name="submitter" />
</form>

CSS

#frame_uploader {
    border: 10px solid blue;
    height: 100px;
    width: 100px;
    display: block;
}

img {
    display: block;
    border: 2px solid red;
    height: 10px;
    width: 10px;
}

JavaScript

$("#fileinput").on('change', function () {
    var $iframe = $("<iframe />").attr({
        id: 'frame_uploader',
        name: 'frame_uploader'
    });
    var imageUrl = "";
    var $img = $("<img />");
    $("#upload-form").prepend($img).append($iframe)
        .attr('target', 'frame_uploader')
        .trigger('submit');
    $iframe.load(function () {
        var imageUrl = $iframe.contents().find("body").text();
        $img.attr('src', imageUrl);
    });
});