JSFiddle - React, Tailwind, and code Playground
HTML
<input id="imgInput" type="file" name="file[]" multiple style="display:none;"/>
<input type="button" onclick="$('#imgInput').click();" value="Choose File" />
<output id="result" ></output>
<div style="margin-top:150px;" id="uploadedcontent"></div>
JavaScript
var ftype = new Array(), count1 = 0;
$(function() {
$("#imgInput").change(function (event) {
alert(event.data);
readURL(this, event.data);
});
});
function readURL(input, resetId) {
//alert(input.data);
var files = input.files;
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var picReader = new FileReader();
var divid = 'div_' + i;
var spanid = 'span_' + i;
var count = 0;
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var picnames = files[count].name;
var mimetypes = picFile.result.split(',');
var mimetype1 = mimetypes[0];
var mimetype = mimetype1.split(':')[1].split(';')[0];
count++;
count1++;
var div = document.createElement("div");
div.setAttribute('id', 'div_' + count);
div.setAttribute('class', 'divclass');
if (mimetype.match('image')) {
if(resetId) {
alert(resetId);
document.getElementById(resetId).setAttribute("src", picFile.result);
document.getElementById(resetId).setAttribute("title", picnames);
document.getElementById(resetId).setAttribute("data-valu", mimetype);
} else {
div.innerHTML = "<img id='img_" + count1 + "' class='thumbnail' src='" + picFile.result + "'" +
"title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/>";
div.innerHTML += "<input type='button' onclick=\"$('#imgInput').click({resetId : 'img_" + count1 + "'});\" value='reset'/>";
}
...