JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Viewer" style="font-size: 14px;"></div>
<input type="file" class="inputbtnupload trnsupload" name="image" onchange="Transfer(this);" multiple="multiple" style="font-size: 14px;">
CSS
#Viewer img{
width:100px;
height:100px;
}
JavaScript
window.Transfer = function (input) {
if (input.files && input.files[0]) {
$(input.files).each(function (i,val) {
var f = $('.trnsupload').prop("files")[0]['name'];
var reader = new FileReader();
reader.readAsDataURL(this);
reader.onload = function (e) {
$("#Viewer").append("<div class='imageContainer'><img onclick='changeIt(this)' class='thumb img-thumbnail' src='" + e.target.result + "'> <span class='MultiFile-title'>" + f + "</span> <span class='loader'><img src='../../Images/ajax-loader.gif' /></span> <span class='closeCover glyphicon glyphicon-remove'></span></div>");
}
//var f = $('.trnsupload').prop("files")[0]['name']; <span class='MultiFile-title'>"+f+"</span>
});
}
}