JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<div class="file-input">
  <input type="file">
</div>

CSS

.file-input {
  width: 300px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
input[type='file']{
  outline: none;
  width: 100%;
  padding-bottom: 10px;
  margin-left: -80px;
}
input[type='file']:after {
  font-size: 1rem;
  content: 'Drag file here to upload';
  line-height: 75px;
  position: absolute;
  top: 25px;  bottom: 0; right: 0; left: 0;
  text-align: center;
  background-color: white;
  border: 2px dashed lightgray;
  color: gray;
}
.hover input[type='file']:after{
  border: 2px dashed rgba(30, 144, 255, 1);
  color: rgba(30, 144, 255, 1);
  background-color: rgba(30, 144, 255, 0.1);
}

JavaScript

var wrap = document.querySelector('.file-input');
wrap.addEventListener('dragenter', dragStart);
wrap.addEventListener('drop', dragStop);
wrap.addEventListener('dragleave', dragStop);

function dragStart(){
	wrap.classList.add('hover');
}

function dragStop(){
	wrap.classList.remove('hover');
}