드래그해서 파일 업로드하기 - javascript, vuejs, html

파일 올릴 때 드래그해서 올리기

---

html

<!-- 파일을 drop하는 영역엔 dragover, dragenter 막아둬야 drop이 된다 -->
<!-- <div class="file_box" @drop.prevent="onDrop($event)" @dragover.prevent @dragenter.prevent> -->
<div class="file_box" @drop.prevent="onDrop($event)"
                         @dragover.prevent
                         @dragenter.prevent="onEnter($event)"
                         @dragleave.prevent="onLeave($event)">
  <p class="file_txt">이곳에 파일을 놓으세요.<br>or</p>
  <p class="file_btn">
    <input type="file" @change="selectFile" accept="image/png">
    <span class="fake_btn">파일 선택</span>
  </p>
</div>

scss

.file_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 20rem;
  text-align: center;
  background-color: #ddd;
  border-radius: 2rem;
  input[type="file"] {
    position: absolute;
    left: -100%;
    top: -100%;
    width: 200%;
    height: 200%;
  }
  .file_txt {
    font-size: 2rem;
    color: #777;
    pointer-events: none;
  }
  .file_btn {
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    background-color: #777;
    z-index: 9;
  }
  .fake_btn {
    padding: 0.5rem 2rem 0.6rem;
    display: inline-block;
    font-size: 2rem;
    color: #fff;
  }
  &.on{
    background-color: #ccc;
  }
}

js

...
// 파일 선택
selectFile = (e) => {
  console.log(e.target.files);
  // console.log(e.target.files[0]);
}
// 파일 선택(drop)
onDrop = (e) => {
  // e.preventDefault();// 막아줘야 drop을 했을 때 브라우저에서 실행이 안된다
  // @drop.prevent="onDrop($event)" 처럼 tag를 작성하면 e.preventDefault()는 필요없다
  console.log([...e.dataTransfer?.files]);
  // console.log([...e.dataTransfer?.files][0]);
}
// drop 할 때 효과주려면
onEnter = (e) => {
  e.target.classList.add("on");
}
onLeave = (e) => {
  e.target.classList.remove("on");
}
...

input type="file" 과는 다르게 drop으로 파일을 던지면 dataTransfer 데이터에 file 정보가 있다.

끝.