JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<div id="images_div" class="rounded_div"> <span class="rounded_div_heading">Add Images</span>

    <br/>
    <input type="file" name="uploaded_files[]" id="input_clone" multiple="multiple" />
    <br/>
    <br/>
    <table id="image_preview_table" name="image_preview_table"></table>
</div>

JavaScript

function PreviewImages() {
    var inputID = document.getElementById('input_clone');
    var totalImages = inputID.files.length;
    var imagesPerRow = 3;
    var numRows = totalImages / imagesPerRow;
    var row = "";
    var cell = "";
    var element1 = "";
    var elementID = "";

    for (var i = 0; i < numRows; i++) { //create rows
        row = document.getElementById('image_preview_table').insertRow(i);
        for (var ii = 0; ii < imagesPerRow; ii++) { //create cells
            cell = row.insertCell(ii);
            elementID = "img_" + ii;
            element1 = document.createElement("img");
            element1.name = elementID;
            element1.id = elementID
            cell.appendChild(element1);

            oFReader = new FileReader();

            oFReader.onload = function (oFREvent) {
                var dataURI = oFREvent.target.result;
                var image = document.getElementById(elementID);
                image.src = dataURI;
            };

            oFReader.readAsDataURL(document.getElementById("input_clone").files[ii]);

        }
    }
}

window.addEventListener("load", function () {
    document.getElementById("input_clone").addEventListener("change", PreviewImages, false);
}, false);