<div class="con-input-file ">
      <button onclick="handleClickRemove()" class="remove-image">
        <i class='far fa-times-circle'></i>
      </button>
      <div class="con-bg">
        <img class="bg" src="" alt="">
      </div>
      <div class="img-1">
        <i class="far fa-user"></i>
      </div>
      <div class="img-2">
        <div class="square-1"></div>
      </div>
      <div class="img-3">
        <div class="square-2"></div>
      </div>
      <div class="con-text">
        drag image
      </div>
      <input class="input" 
             onchange="processFile(event)" 
             ondragleave="dragLeave(event)" 
             ondragenter="dragEnter(event)" 
             type="file" name=""  id="">
    </div>

/* @import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap);
 body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f1f3f6;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
} 
 * {
  list-style: none;
  outline: none;
  padding: 0;
  margin: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
} */
.con-input-file {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 140px;
  height: 140px;
  transition: all 0.25s ease, border 0.1s;
}
.hasFile {
  border: 0px dashed rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.03);
} 
.hasFile .img-1,
.hasFile .img-2,
.hasFile .img-3 {
  opacity: 0;
}
.hasFile .con-text {
  opacity: 0;
}
.hasFile .remove-image {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.hasFile .bg {
  transform: scale(1);
  opacity: 1;
}
.drop {
  background: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0);
  transform: scale(1.05);
}
.drop .img-1 {
  transform: scale(1);
}
.drop .img-2 .square-1 {
  transform: scale(0.95) rotate(-10deg);
}
.drop .img-3 .square-2 {
  transform: scale(0.9) rotate(10deg);
}
.drop .con-text {
  opacity: 0;
  transform: scale(0.85) translate(0, -15px);
}
.con-input-file input {
  position: relative;
  width: 140px;
  height: 140px;
  z-index: 10;
  opacity: 0;
  display: block;
}
.remove-image {
  color:#848484;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  border: 1px #000;
  font-size: 1.5rem;
  margin: 10px;
  cursor: pointer;
  z-index: 1500;
  opacity: 0;
  transform: scale(0.5);
  visibility: hidden;
  transition: all 0.25s ease;
/*   background: #aaaaaa; */
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
}
.con-bg {
  position: absolute;
  border-radius: inherit;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bg {
  z-index: 200;
  pointer-events: none;
  transition: all 0.25s ease;
  opacity: 0;
  transform: scale(0.2);
  height: 100%;
}
.con-text {
  text-align:center;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  margin-top: 100px;
  font-weight: 600;
  opacity: 0.5;
  font-size: 0.55rem;
  transition: all 0.25s ease;
}
.img-1 {
  w
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  left: 14%;
  top: 36%;
  pointer-events: none;
  transform: rotate(-15deg);
  color:#848484;
  position: absolute;
  pointer-events: none;
  width: 100px;
  transition: all 0.25s ease;
  font-size:30px;
}
/* .img-1 svg {
  width: 100px;
  transition: all 0.25s ease;
}  */
.img-2 {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.square-1 {
  width: 65px;
  height: 65px;
  background: linear-gradient(0deg, #93e5b0 0%, #65e0db 100%);
  border-radius: 10px;
  margin-top: -10px;
  margin-left: 0px;
  transform: rotate(-15deg);
  pointer-events: none;
}
.img-3 {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.square-2 {
  transform: rotate(15deg);
  width: 65px;
  height: 65px;
  background: linear-gradient(90deg, #ffa936 0%, #ff6359 100%);
  border-radius: 10px;
  margin-top: -4px;
/*   transform: rotate(10deg); */
  pointer-events: none;
}

    const conFile = document.querySelector('.con-input-file')
    const img1 = document.querySelector('.img-1')
    const img2 = document.querySelector('.img-2')
    const img3 = document.querySelector('.img-3')
    const imgFile = document.querySelector('.bg')
    const input = document.querySelector('.input')
    

    function dropHandler(evt) {
        console.log('File(s) dropped');
        conFile.classList.remove('drop')
        anime({
            targets: '.img-1',
            left: `25%`,
            top: `25%`,
            duration: 400
        })
        anime({
            targets: '.img-2',
            left: `140px`,
            top: `140px`,
            duration: 600
        })
        anime({
            targets: '.img-3',
            left: `140px`,
            top: `140px`,
            duration: 800
        })
    }

    function dragOverHandler(evt) {
        anime({
            targets: '.img-1',
            left: `${evt.layerX}px`,
            top: `${evt.layerY}px`,
            duration: 200
        })
        anime({
            targets: '.img-2',
            left: `${evt.layerX}px`,
            top: `${evt.layerY}px`,
            duration: 300
        })
        anime({
            targets: '.img-3',
            left: `${evt.layerX}px`,
            top: `${evt.layerY}px`,
            duration: 400
        })
        conFile.classList.add('drop')
        evt.preventDefault();
    }

    function dragLeave(evt) {
        conFile.classList.remove('drop')
        setTimeout(() => {
            anime({
                targets: '.img-1',
                left: `50%`,
                top: `50%`,
                duration: 400,
            })
            anime({
                targets: '.img-2',
                left: `50%`,
                top: `50%`,
                duration: 600,
            })
            anime({
                targets: '.img-3',
                left: `50%`,
                top: `50%`,
                duration: 800,
            })
        }, 50);
    } 

    function dragEnter(evt) {
        conFile.classList.add('drop')
    }

    function processFile (event) {
        function getBase64 (file) {
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = function () {
                imgFile.src = reader.result
                conFile.classList.add('hasFile')
            }
        }

        const file = event.target.files[0]
        getBase64(file)
    }

    function handleClickRemove() {
        conFile.classList.remove('hasFile')
        setTimeout(() => {
            imgFile.src = ''
        }, 250);
        input.type = 'text'
        input.type = 'file'
    }