JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop_zone">
  ドロップ
</div>
<div id="preview">

</div>

<button type="button" id="post">
  post
</button>

CSS

#drop_zone {
  border: 5px dashed #000000;
  padding: 50px;
  margin: 20px;
  font-size: 24px;
  color: #000000;
  background-color: #ffffff;
  text-align: center;
}

#preview {
  overflow: hidden;
}

#preview img {
  width: 100px;
  float: left;
  margin: 10px;
  cursor: move;
}

JavaScript

var formData = new FormData();
var dropZone = document.getElementById("drop_zone");

dropZone.addEventListener("dragover", function(e) {
  e.stopPropagation();
  e.preventDefault();
  
  this.style.background = "#ff3399";
}, false);

dropZone.addEventListener("dragleave", function(e) {
  e.stopPropagation();
  e.preventDefault();
  
  this.style.background = "#ffffff";
}, false);

dropZone.addEventListener("drop", function(e) {
  e.stopPropagation();
  e.preventDefault();

  this.style.background = "#ffffff";
  
  var files = e.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    (function() {
      var fr = new FileReader();
      fr.onload = function() {
        var div = document.createElement('div');

        var img = document.createElement('img');
        img.setAttribute('src', fr.result);
        div.appendChild(img);

        var preview = document.getElementById("preview");
        preview.appendChild(div);
      };
      fr.readAsDataURL(files[i]);
    })();
    
    formData.append("file", files[i]);
  }
}, false);

  
var postButton = document.getElementById("post");
postButton.addEventListener("click", function() {
  var request = new XMLHttpRequest();
  request.open("POST", "POST_URL");
  request.send(formData);
});