드래그 앤 드롭 데이터를 Input에 넘기는 방법

Drag and Drop Event로 첨부파일을 업로드하는 과정에서 발생한 문제와 해결 과정을 담은 글이다.
파일을 Drag and Drop하여 업로드하는 기능이 적용되지 않는 문제를 발견하고, 이를 해결하기 위해 코드를 분석하며 여러 시도를 했다.
이 과정에서 뤼튼의 도움을 받아 문제를 해결했는데, jQuery 이벤트 객체를 사용하면 e.dataTransfer가 정의되지 않는 문제를 발견했다.
이를 바탕으로 코드를 수정하니 문제가 해결되었다.

 

 

 

✨시작하며

전자정부 프레임워크에서 프로젝트 수행 중 첨부파일 부분은 Drag and Drop Event가 정상적으로 적용되었는데, 파일첨부와 썸네일이 들어가는 게시판 스킨들에서 썸네일을 Drag and Drop Event로 등록 시 정상적으로 첨부파일이 업로드가 되지 않는 것을 확인했다.

Controller와 jsp를 확인해 보아도 무엇이 문제인지 제대로 파악하지 못했는데, 이번에는 뤼튼의 도움을 받으며 코드 수정을 진행했다.

 

 

 

당시 상황 및 코드 구조

당시 사용한 html 구조 간략화

 

$(document).ready(function()과 onchange)

div 영역에 파일을 Drag and Drop 시 Event가 발생하도록 설정했다.
동일한 구조로 썸네일과 첨부파일을 받고 있었는데, 썸네일과 첨부파일의 로직이 각각 다르기 때문인지 썸네일 영역의 div에서는 Drag and Drop이 미리 보기까지만 적용이 되고 실상 파일은 등록되지 않았다.

 

 

 

😯그래서 어떻게 해결했는데?

이리저리 치이다 결국 뤼튼에게 내가 작성한 Drag and Drop Event 스크립트 부분 일부와 질문 내용을 작성해 물어보았다.
물어보고 답변으로 받은 코드를 적용시켜도 정상적으로 등록이 되지 않아 이 코드가 맞냐고 다시 물어봤다.

 

코드가 jQuery를 사용하는 것으로 보인다는 답변이 왔다.
jQuery를 사용하면 파일 업로드 시 이벤트 객체 처리에 문제가 발생하는 듯 했다.

 

저렇게 바꾸면 기대한 대로 동작할 것이라고 하니 믿고 따라서 코드를 수정해 주었다.
아니나 다를까, 갑자기 코드가 정상적으로 동작하기 시작했다.
파일첨부 버튼과 Drag and Drop Event 그 무엇으로 파일을 등록하더라도 CRUD가 정상적으로 이루어졌다.

jQuery 이벤트 객체를 사용하면 e.dataTransfer가 정의되지 않는다.