HTML5에서 파일 입력 값 기억하고 다시 채우기: 드래그 앤 드롭 완벽 가이드

HTML5 파일 입력 다시 채우기의 과제

보안상의 이유로 <input type="file"> 요소의 값은 JavaScript로 직접 설정할 수 없습니다. 그러나 HTML5의 드래그 앤 드롭 API와 DataTransfer 객체를 활용하면 파일 입력을 다시 채우는 것이 가능해졌습니다. 예전에는 불가능했던 이 작업이 이제는 표준적으로 지원됩니다.

드롭 이벤트로 파일 처리하기

사용자가 파일을 드롭하면 이벤트 객체에서 dataTransfer 필드를 가져와 파일 목록을 추출한 뒤, 별도의 처리 함수에 전달하는 방식입니다.

function drop(ev) {
  ev.stopPropagation();
  ev.preventDefault();

  // 이벤트에서 dataTransfer 필드 가져오기
  var d = ev.dataTransfer;
  var files = d.files;
  handleFiles(files);
}

드래그 앤 드롭 이벤트 등록하기

드래그 앤 드롭이 정상적으로 작동하려면 dragover, dragleave, drop 세 가지 이벤트를 모두 처리해야 합니다. 각 단계에서 preventDefault()를 호출해 브라우저의 기본 동작(파일 자동 열기 등)을 차단하는 것이 핵심입니다.

// 드래그 중
target.addEventListener('dragover', (ev) => {
  ev.preventDefault();
  body.classList.add('dragging');
});

// 드래그 영역 벗어남
target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

// 드롭 대상
target.addEventListener('drop', (ev) => {
  ev.preventDefault();
  body.classList.remove('dragging');
});

구현 시 핵심 포인트

• preventDefault() 호출: dragover와 drop 이벤트에서 반드시 호출해야 브라우저가 파일을 새 탭으로 여는 기본 동작을 방지할 수 있습니다.
• stopPropagation(): 이벤트가 상위 요소로 전파되어 의도치 않은 동작이 발생하는 것을 막아줍니다.
• 시각적 피드백: CSS 클래스를 추가·제거하여 사용자가 드래그 상태를 직관적으로 인식하도록 UI를 개선할 수 있습니다.
• dataTransfer.files: 드롭된 파일은 FileList 형태로 제공되므로, 일반 파일 입력과 동일하게 반복문으로 순회하며 처리할 수 있습니다.

이처럼 드래그 앤 드롭 API를 활용하면 파일 입력 요소를 유연하게 다시 채우고, 사용자 경험을 크게 향상시킬 수 있습니다.