JSFiddle - React, Tailwind, and code Playground

by Anton

HTML

<input type="file" multiple accept="image/*" />
<div class="output"></div>
<script type="text/javascript" src="source.js"></script>

JavaScript

const message = document.getElementById("message");
const output = document.querySelector(".output");
const myInput = document.querySelector("input");
myInput.addEventListener("change", uploadAndReadFile);

// Returns a new function on every call!
function generateOnloadHandler(imgElement) {
  return function (e) {
    imgElement.src = e.target.result;
  };
}

function uploadAndReadFile(e) {
    const files = e.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        
        // Create and append img element
        const img = document.createElement("img");
        img.classList.add("thumb");
        img.file = file;
        output.appendChild(img);
        
        // Read file into image
        const reader = new FileReader();
        const onloadHandler = generateOnloadHandler(img);
        reader.onload = onloadHandler;
        reader.readAsDataURL(file);
    }
}