JSFiddle - React, Tailwind, and code Playground

by simevidas

HTML

<form id="myForm" method="post" enctype="multipart/form-data">Files:
    <input type="file" id="files" name="files" accept="image/*" multiple />
    <br/>
    <div id="selectedFiles"></div>
    <input type="submit" />
</form>

<script>function toArray(o) { return [].slice.call(o) }</script>

CSS

#selectedFiles img {
    max-width: 125px;
    max-height: 125px;
    float: left;
    margin-bottom: 10px;
}

JavaScript

var selDiv = document.querySelector('#selectedFiles');

document.querySelector('#files').addEventListener('change', function handleFileSelect(e) {  
    if (!e.target.files || !window.FileReader) return;

    selDiv.innerHTML = '';
    
    toArray(e.target.files).forEach(function (f) {
        if (!f.type.match("image.*")) return;

        var reader = new FileReader();        
        reader.onload = function (e) {
            var html = '<img src="' + e.target.result + '">' + f.name + '<br clear="left">';
            selDiv.innerHTML += html;
        }
        reader.readAsDataURL(f);
    });
}, false);