File drag and drop

 htm에 파일을 드래그앤 드랍을 하여 파일을 업로드 하는 것을 그렇게 어려운 일은 아니다. 그래도 해당 기능이 있으면 꽤나 편한 기능이기에 방식을 소개하면서 해당 코드를 공유 하고자 작성 한다.

 여기서 신경써야 하는 이벤트는 두가지 있다. drop이벤트와 dragover이벤트이다. drop이벤트는 딱보아도, 해당영역에 무언가 떨어졌을 때이다 드랍쉽을 생각하면 된다.

 당연하게도 drop이벤트에서 파일을 확인 할 수 있게 된다. 자 그러면 dragover는 왜 확인해야 할까?

 drop 이벤트도 그렇지만 dragover의 이벤트의 파일 끌기의 브라우저 기본기능이 일반적으로 파일을 오픈하는 행위라서이다. 간단하게만 생각하면 파일을 놓는 순간 파일이 다운로드 될테이다. drop의 기본기능만 껏다가는 계속 파일을 다운로드 받게 될 것이다.

 자 아래의 코드들을 확인하자.

 특이점은 세가지정도로 분류 할 수 있다.

1. html(루트 엘리먼트) 에 이벤트 리스너.

2. drop-zone이 label이면서 input[type=file]태그

3. drop-zone에 drop과 dragover를 제외한 이벤트 리스터들.

 아래는 해석이다.
1. html(루트 엘리먼트) 에 이벤트 리스너.

 난 드래그앤 드랍 파일기능을 제공 하는 사이트들에서 꽤 불편하게 느꼇던 것이 뚱뚱한 손가락 오류 였다. 조금만 빗나가면 수많은 파일들이 다운로드 받아졌다. 따라서 기본기능을 제거하기위해 루트엘리먼트에도 이벤트리스너를 달았다. 

2. drop-zone이 label이면서 file태그

파일 드래그앤 드랍만 제공할 경우 꽤나 불편한 상황이 올것이다. 특히나 모니터를 여러대 사용하거나 멀티윈도우를 사용하는 경우엔... 그래서 drop 영역을 클릭시 input type="file"이 해당 이벤트를 받을 수 있도록 영역을 라벨로 처리 하였다.

참고로 input type="file"은 display none을 사용하게 되면 위의 기능이 되지 않기에 opaciry와 position:absolute로 처리 한 것이다.

3. drop-zone에 drop과 dragover를 제외한 이벤트 리스터들.

 dragover 중 에는  hover 의사클래스가 작동 하지 않는다. 그래서 hover를 대신할만한 이벤트를 생성할 필요가 있었다. 

쌍으로만 보면 ondragover ondragenter hover 중 일 것이고, ondragleave ondragend ondrop hover가 빠지는 시점이 된다.

물론 mdn에는 파일을 드래그중에는 dragstart와 dragend이벤트는 발생하지 않는다고 한다. 하지만 어떻게 될지 모르니 dragend도 작성하게 되었다.

위의 코드는 이미지를 적당히 노출 시켜주는 용도이지만 당연하게도 File 객체를 쓸수 있으므로 서버코드만 작성하면 파일업로드는 구현이 가능 할 것이다.