시작하는 중
드래그 앤 드롭 업로드 본문
React 프로젝트를 진행하면서, 이미지를 업로드할 때 드래그 앤 드롭과 이미지를 보여주는 것으로 구현하고 싶었다.
찾다보니까 본 글인데, drag 이벤트를 활용하는 것이다.
https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API
HTML 드래그 앤 드롭 API - Web API | MDN
HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppa
developer.mozilla.org
읽다보면, drag된 아이템은 event의 dataTransfer에 담겨있다. 일단, 블로그 글대로 따라가기 위한 코드!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>드래그 앤 드롭 업로드</title>
</head>
<body>
<h2>파일 업로드 해보기</h2>
<div
style="background-color: #aeafae; width: 400px; height: 300px"
id="default-div"
>
<input type="file" id="input-file" />
</div>
<script>
const bgDivTag = document.getElementById("default-div");
const fileInputTag = document.getElementById("input-file");
bgDivTag.addEventListener("dragenter", (e) => {
console.log("dragenter");
});
bgDivTag.addEventListener("dragleave", (e) => {
console.log("dragleave");
});
bgDivTag.addEventListener("dragover", (e) => {
e.preventDefault();
console.log("dragover");
});
bgDivTag.addEventListener("drop", (e) => {
e.preventDefault();
console.log("drop");
});
</script>
</body>
</html>
이렇게 나오고! 파일을 끌어다가 놔보면,
결과도 잘 나온다.
여기서 이제 이벤트를 들여다 볼 것이다.
각 이벤트마다 1번씩 이벤트를 출력해볼 것이다.
뭐에요 왜 안나와요
console.log(e.dataTransfer.files);이렇게 까지하니까 나온다.
드랍에서만 나온다. 아마도 타입이랑 관련이 있나? fileList라서 그런건 것 같다..
아무튼 drop 이벤트에서만 데이터를 가져올 수 있다는 것
근데 dragover에 preventdefault가 있고, 심지어 mdn에서도 있어서 찾아보니까
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event#examples
HTMLElement: dragover event - Web APIs | MDN
The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
developer.mozilla.org
여기서,
- in the dragover event handler for the target container, we call event.preventDefault(), which enables it to receive drop events.
라고 한다. 아마도 dragover가 더 앞서는 듯?
그 뒤로는 쉽다.
input 태그 가져와서 files를 할당하면 됨
fileInputTag.files = e.dataTransfer.files;
참고로 change나 input 이벤트는 발생하지 않는다.
reference
https://dev-gorany.tistory.com/254
https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event#examples
'자바스크립트' 카테고리의 다른 글
| 함수형 프로그래밍 (0) | 2023.05.15 |
|---|---|
| 모듈, 번들러, 모듈 번들러의 개념과 등장한 이유 (0) | 2023.05.06 |
| 자바스크립트 iterator와 iterable (0) | 2023.04.07 |
| 업로드한 이미지 미리보기 (0) | 2023.03.29 |
| Javascript의 비동기 처리 (0) | 2023.03.10 |
