JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<button id="addPic">Adicionar</button>
<div id="imgs"></div>

JavaScript

document.querySelector("#addPic").addEventListener("click",function()
{
    var input = document.createElement("input");
    input.type = "file";
    input.name = "photos[]";
    input.setAttribute("multiple", "");
    input.addEventListener("change", function(pEvt)
    {
        var files = pEvt.target.files;
        for (var key = 0 ; key < files.length ; key++) {
            var reader = new FileReader();
            reader.onload = createThumbnail;
            var photo = files.item(key);
            if (photo)
                reader.readAsDataURL(photo);
        }
    });
    input.click();
},false);

var createThumbnail = function(e)
{
    var myImg = document.createElement("img");
    myImg.src = e.target.result;
    myImg.alt = "anexo";
    myImg.width = 50;
    myImg.height = 50;
    document.querySelector("#imgs").appendChild(myImg);
}