JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file1" type="file" value="somepath" />
<div id="target">

</div>

CSS

#target{
  position:relative;
  height:100px;
  background-color:#ccc;
}

JavaScript

var target = document.getElementById('target');

target.addEventListener('dragover', (e) => {
  e.preventDefault();
});
target.addEventListener('drop', (ev) => {
     ev.preventDefault();
     var FileList = ev.dataTransfer.files;
     
     builduploadlist(FileList);
     
});

function builduploadlist(FileList){

	$('#target').html('');
  
  var output = '<table width="100%" cellpadding="5" cellspacing="0" border="0">';
  
  for(var i=0;i<FileList.length;i++){
  
  	output += '<tr><td width="50%">' + FileList[i].name + '</td><td><form enctype="multipart/form-data" method="post"><input type="file" name="file' + i +'" id="file' + i +'"><br><input type="button" value="Upload File" onclick="uploadFile(' + i +')"><progress id="progressBar' + i +'" value="0" max="100" style="width:300px;"></progress><h3 id="status' + i +'"></h3><p id="loaded_n_total' + i +'"></p></form></td></tr>';
  
  }
  
  output += '</table>';
  
  $('#target').html(output);
  
  for(var i=0;i<FileList.length;i++){
  
  	$('#file'+i)[0].files = FileList[i];
  
  }

}