<div id="container">
  <h1>Drag & Drop an Image</h1>
<div id="drop-zone">
    DROP HERE
</div>
  
<div id="content">
    Your image to appear here..
</div>

</div>

html {
  height: 100%;
}

body {
  background: #000000;
  color: #FFFFFF;
}

div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: 'Roboto Mono', monospace;
}

div#container {
  margin: 15px;
}

div#drop-zone {
  height: 400px;
  width: 400px;
  border: 2px dotted #ebebeb;
}

div#drop-zone:hover {
  background-color: gray;
  border: 1px dotted #000000;
  cursor: move;
}

div#content {
  border: 1px solid #FFF;
  margin-top: 15px;
  padding: 10px;
}

const dropZone = document.getElementById('drop-zone');
const content = document.getElementById('content');

const reader = new FileReader();

if (window.FileList && window.File) {
  dropZone.addEventListener('dragover', event => {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
  });
  
  dropZone.addEventListener('drop', event => {
    content.innerHTML = '';
    event.stopPropagation();
    event.preventDefault();
    const files = event.dataTransfer.files;
    console.log(files);
    
    reader.readAsDataURL(files[0]);
  
    reader.addEventListener('load', (event) => {
      content.innerHTML = '';
      const img = document.createElement('img');
      img.style.height = '400px';
      img.style.width = '400px';
      content.appendChild(img);
      img.src = event.target.result;
      img.alt = file.name;
      
    });
  }); 
}