drag and upload

by uiwwnw

HTML

<div id="abcde" class="fileUploader">
  <label>
    <input type="file" multiple>
  </label>
  <div class="before">
    📁 파일을 올려주세요.
  </div>
  <div class="after">
    <button type="button" class="allDelBtn">일괄삭제</button>
    <button type="submit">일괄등록</button>
  </div>
</div>

SCSS

.fileUploader {
    position: relative;
  display: block;
  border: 1px solid;
  padding: 8px 10px 10px;
  text-align: center;
    &:after {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: '';
  }
  label {
  
  input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0;
  }
}
  &.draging {
    background: #ddd;
  }
  
  &.done {
    background: 0;
    
    label {
      display: none;
    }
    .before {
      display: none;
    }
     .after {
       display: inline-block;
     }
  }
  .before {
    display: inline-block;
    vertical-align: middle;
  }
  
  .after {
    display: none;
    vertical-align: middle;
  }
}

JavaScript

var DragUpload = (function() {
  function onchange(e) {
    if (this.input.value) {
      var ol = document.createElement('ol');
      this.files = e.target.files;
      var length = this.files.length;
      for (var i = 0; i < length; i++) {
        var li = document.createElement("li");
        var button = document.createElement('button');
        button.innerText = 'x';
        button.type = 'button';
        button.onclick = del.bind(this);
        li.innerText = this.files[i].name;
        li.append(button);
        li.dataset.key = i;
        li.dataset.size = this.files[i].size;
        li.dataset.type = this.files[i].type;
        ol.append(li);
      }
      this.after.append(ol);
      this.el.classList.add('done');
      this.el.classList.remove('draging');
    }
    if (!this.input.value) {
      this.el.classList.remove('value');
    }
  }

  function ondragover() {
    this.el.classList.add('draging');
  }

  function ondragleave() {
    this.el.classList.remove('draging');
  }

  function del(e) {
    if (e === 'all') {
    	this.input.value = '';
      this.el.classList.remove('done');
      this.after.querySelector('ol').remove();
      this.files = null;
    } else {
    	if(this.after.querySelectorAll('li').length === 1) {
      	del.call(this, 'all');
      } else {
      console.log(this.files);
      	delete this.files[e.target.parentElement.dataset.key];
              console.log(this.files,e.target.parentElement.dataset.key);
        e.target.parentElement.remove();
      }
    }
  }

  function DragUpload(id) {
    this.el = document.getElementById(id);
    this.input = document.querySelector('#' + id + ' label input');
    this.before = document.querySelector('#' + id + ' .before');
    this.after = document.querySelector('#' + id + ' .after');
    this.allDelBtn = document.querySelector('#' + id + ' .allDelBtn');
    this.el.ondragover = ondragover.bind(this);
    this.el.ondragleave = ondragleave.bind(this);
    this.input.onchange =...