JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<label for="input" id="label" draggable="true">
  Click to add file or drag file
  <input type="file" id="input">
</label>

<div id="preview"></div>

CSS

#label {
  display: block;
  border: 2px dashed #b1b1b1;
  padding: 10px 15px;
  cursor: pointer;
}

#input {
  display: none;
}

#preview {
  border: 2px dashed #b1b1b1;
  height: 200px;
}

JavaScript

'use strict';

const inputElement = document.getElementById('input');
const labelElement = document.getElementById('label');
const previewElement = document.getElementById('preview');

labelElement.addEventListener('dragenter', dragenter, false);
labelElement.addEventListener('dragover', dragover, false);
labelElement.addEventListener('drop', drop, false);

function handleFiles(files) {
  var fileList = files;
  var file = fileList[0];
  console.log(fileList, fileList[0].name, fileList[0].size, fileList[0].type);
  processFile(file);
}

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  console.log(dt);
  handleFiles(files);
}

function processFile(file) {
  previewElement.innerHTML = '';
  const img = new Image();
  img.src = window.URL.createObjectURL(file);
  //const reader = new FileReader();

  // reader.addEventListener('load', function(e) {
  // img.src = e.target.result;
  // });
  //reader.readAsDataURL(file);
  img.onload = function() {
    window.URL.revokeObjectURL(this.src);
  }
  previewElement.appendChild(img);
}