JSFiddle - React, Tailwind, and code Playground

HTML

<form action="index-upload-2.php" method="POST" enctype="multipart/form-data">
<div>
Jmeno: <input name="name" type="text">
</div>
<div>
File: <input name="file-1" type="file" id="file-1" multiple>
</div>
<div draggable="true">
<div class="drop">
DROP PORD RDPO
</div>
<div>
<input name="submit" type="submit" value="OK">
</div>
</div>
</form>

CSS

.drop{
  width: 600px;
  height: 300px;
  background-color: rgb(179, 179, 214);
  display: block;
}
div.drop.is-dragover{
  background-color: rgb(204, 162, 160);
}

JavaScript

$(function(){
   var dropzone = $('.drop');
   dropzone.on('drag dragstart dragend dragover dragenter dragleave drop', function(e){
   e.preventDefault();
   e.stopPropagation();
   })
   
   dropzone.on('dragover dragenter', function() {
   $(this).addClass('is-dragover');
   });
   
   dropzone.on('dragleave dragend drop', function(){
   $(this).removeClass('is-dragover');
   })
   
   dropzone.on('drop', function(e){
      console.log("drop");
      var files = e.originalEvent.dataTransfer.files;
      console.log(files);
      $("#file-1").prop('files', files);
   });
})