[ 자바스크립트(JavaScript) ] 이미지 드래그 앤 드롭기능 구현하기

📍 drag and drop 구현하기

이거 먹어봄? 프로젝트를 하면서 사진을 서버에 전송하기 위해 어떤 기능을 구현해볼까 하다가 평소 우리가 웹사이트에 자주 볼 수 있는 기능인 파일을 업로드하려면 드래그하거나 클릭하세요를 구현해보고 싶었다. 해당 기능을 구글링 해보니까 drag-drop이라는 npm 라이브러리들이 있었지만, 굳이 라이브러리를 사용하지 않아도 MDN에서 제공하는 HTML 드래그 앤 드롭 API을 통해서도 구현할 수 있다고 생각했고 직접 바닐라로 구현했다. 하단의 gif를 통해 결과를 확인할 수 있다. codePen의 예제에서는 파일 유효성 검사 함수 코드는 제거했다.

 

 

See the Pen image-drag-and-drop by an (@YWTechIT) on CodePen.

 

---

728x90

🤖 자세한 코드는 깃허브 참고

 

우선, 클릭하여 파일을 업로드를 할 때는 drag이벤트가 필요하지 않고 대신 input태그에 addEventListener('change', handleUpdate)를 붙여서 구현했다. 이때 input 속성은 다음과 같이 설정했다. 각 attribute별로 어떤 의미를 나타내는지 살펴보자. accept는 파일 유형을 의미하고 type은 파일을, required는 form 양식에서 꼭 필요한 값을 의미하고, multiple은 여러 개의 파일을 업로드할 수 있다. hidden은 label을 연결해서 사용하기 위해 true로 넣어 겉으로 보이지 않게 설정했다.

<input id="input" class="input" accept="image/*" type="file" required="true" multiple="true" hidden="true">

여기서 잠깐 짚고 넘어갈 것이 accept를 image/*로 설정했다고 모든 사용자가 이미지 파일만 올린다고 생각하면 큰 오산이다. MDN에서도 input accept 유형은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐이다. 사용자가 옵션을 바꾸면 다른 형태의 파일도 게시할 수 있으므로 서버사이드에서 유효성 검증을 통해 accept 특성을 보조해야 한다라고 명시되어있다.

 

그래서 나는 프론트단에서 필터 역할을 할 수 있게 파일 유효성 검사를 추가해줬다. isValidType와 isValidSize인 함수를 통과한 파일에 대해서만 업로드할 수 있게 설정했다.

 

여러 개의 drag event (drag, dragend, dragenter, dragexit, dragleave, dragover, dragstart, drop) 중 dragenter와 dragleave 이벤트로 해당 label에 드래그하면서 들어왔을 때와 나갔을 때를 감지하여 hover기능을 구현했고, drop 이벤트를 사용하여 파일을 label에 드롭했을 때 파일을 업로드하는 기능을 구현했다.

 

드래그 앤 드롭 인터페이스를 사용하면 DataTransfer 객체를 사용할 수 있는데, event.dataTransfer?.files를 통해 데이터 전송에 필요한 파일의 정보가 담겨있는 객체에 접근할 수 있고 이 값을 토대로 forEach문을 사용해 사용자가 선택한 파일 내용에 각각 접근하여 fileReader개체를 사용해서 이미지의 src를 읽고(이때 src는 base-64 형태) 빈 img태그를 만들어 여기에 src를 붙여주면 새로운 이미지 태그가 된다. 이후에 미리 보기 태그에 append 해주면 drag and drop기능은 끝이 난다.

 

reference

1. MDN: HTML 드래그 앤 드롭 API
2. MDN: DataTransfer
3. MDN: FileReader
4. example: jsfiddle.net