JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:block;" id="MultiUploadDialogTemplate">
	<div class="ModalTitle">Upload</div>
	<div class="ModalContent">
		<div class="MultiUploadDialogContent">
			<div class="UploadDialog">
		
				<div class="GrowingUploader">
        <div id="drop_zone">Jogue as images aqui</div>
					<input id='files' type="file" name="Filedata[]" width="300" class="Button MultiUploadDialogInput"  multiple="multiple" accept="image/*" /> <a href="#">Cancelar</a>
				</div>
				<output id="list"></output>
			</div>
			<div class="ProgressIndicator" style="display:none;">
				<p class="ProgressMessage"></p>
				<div class="ProgressBar">
					<div class="ProgressBarColour">&nbsp;</div>
					<div class="ProgressBarText"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="ModalButtonRow">
		<div class="MultiUploadDialogButtons">
			<div class="FloatLeft">
			
			</div>
			<input type="button" class="Submit FormButton" value="Enviar" />
		</div>
	</div>
</div>
<div id='console'>
</div>
</div>

CSS

#drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold 'Vollkorn';
    color: #bbb;
}

JavaScript

var files = [];



 // Setup the dnd listeners.
 
  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  
  window.APP = {
		
	selecionar_imagem: function(){
		  event.stopPropagation();
    event.preventDefault();
 if (window.File && window.FileReader && window.FileList && window.Blob) { // verificar se tem suporte o navegador
var files = event.target.files; // puxar os arquivos do input

if(files == null){
  var files = event.dataTransfer.files; // FileList object.

}


var output = []; // criar um array de retorno
for (var i = 0, f; f = files[i]; i++) { // criar loop


if (!f.type.match('image')) continue; // verificar se o arquivo e um imagem

var reader  = new FileReader(); // iniciar API html5
		

reader.onload = (function(event) { // load das informacoes das imagens
//console.log(event);
return function(e) {
var div = document.createElement("div"); // criar elemento
div.innerHTML = "<img class='thumbnail' width='50' src='" +  e.target.result + "'" + "title='" + escape(event.name) + "'/><a href='#'  class='remove' data-item='"+event.name+"'>remover</div> <strong>"+escape(event.name)+"</strong> "; // conteudo do elemento

 
document.getElementById('list').insertBefore(div, null);// inserir elementos
 

	div.querySelector('.remove').addEventListener('click',function(r){	
  
	var file = this.getAttribute("data-item");
	

	    for(var i=0;i<files.length;i++) {
            console.log(files[i]);
            if(files[i].name === file) {
            	
							//delete files[i].name;
				
            }
        }
   
        this.parentNode.remove();	
	
	//console.log(files);
	

	});
 
 };

})(f);


reader.readAsDataURL(f);// salva na imagem

}

    } else {
        console.log("Navegador não suporta File API");
    }
		
	}
	
  }
  
document.getElementById('files').addEventListener('change', APP.selecionar_imagem, false);
  var dropZone =...