JSFiddle - React, Tailwind, and code Playground

by laszlooo

HTML

<form>
  <input id="files" type="file" multiple="multiple">
  <div id="result"></div>
</form>

JavaScript

function handleFileSelect(event) {           
    if (window.File && window.FileList && window.FileReader) {
        var files = Array.from(event.target.files);
        var output = document.getElementById("result");
        output.innerHTML = '';
        console.log(files);
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            
            if(file.type.match('.php')){
            	alert('ERROR');
            	continue; 
            }             
            var picReader = new FileReader();
            picReader.addEventListener("load", function (event) {
                var picFile = event.target;
                var div = document.createElement("div");
                div.className = "col-6 col-sm-4 p-1";
                if (file.type.match('image')) {
                    div.innerHTML = "<img src='" + picFile.result + "'" + "title='" + file.name + "'/>";
                }else{
                    div.innerHTML = "<div class='upload-thumb'>" + file.name + "</div>";
                }
                output.insertBefore(div, null);
            });
            //Read the image
            picReader.readAsDataURL(file);
        }
    } else {
        console.log("Your browser does not support File API");
    }
}






document.getElementById('files').addEventListener('change', handleFileSelect, false);