HTML5를 활용해 Safari 브라우저에서 폴더 업로드 감지하는 방법

Safari에서 폴더 드래그 앤 드롭 감지하기

웹 애플리케이션에서 파일을 드래그 앤 드롭 방식으로 업로드할 때, 사용자가 폴더 전체를 끌어다 놓는 경우가 종종 있습니다. Chrome이나 Firefox와 같은 일부 브라우저는 폴더 업로드를 어느 정도 지원하지만, Safari는 폴더 자체의 업로드를 지원하지 않습니다.

따라서 Safari 사용자에게 명확한 안내 메시지를 제공하려면, FileReader API를 활용해 폴더 업로드 시도를 감지하고 적절히 처리해야 합니다. 아래 코드를 참고하세요.

구현 예제 코드

Array.prototype.forEach.call(e.dataTransfer.files, function (file) {
    var r = new FileReader();
    r.onload = function (event) {
        addFile(file);
    };
    r.onerror = function (event) {
        alert("Safari 브라우저에서는 폴더 업로드가 지원되지 않습니다!");
    }
    r.readAsDataURL(file);
});

코드 동작 원리

위 코드의 핵심 로직은 다음과 같습니다.

1. 파일 목록 순회: e.dataTransfer.files에 담긴 모든 파일을 forEach로 하나씩 확인합니다. 폴더를 드래그한 경우에도 이 목록에는 해당 항목이 포함됩니다.

2. FileReader로 읽기 시도: 각 항목을 FileReader.readAsDataURL()로 읽어봅니다. 정상적인 파일이라면 onload 이벤트가 발생하며, 이때 addFile() 함수를 호출해 업로드를 진행합니다.

3. 오류 감지: 반면 폴더처럼 읽을 수 없는 항목은 onerror 이벤트를 트리거합니다. Safari에서는 폴더를 파일로 읽어들일 수 없으므로, 이 시점에 사용자에게 "폴더 업로드는 지원되지 않는다"는 알림을 표시할 수 있습니다.

참고 사항

이 방식은 Safari뿐 아니라 다른 브라우저에서도 폴더 형태의 비정상 입력을 걸러내는 데 활용할 수 있습니다. 더 나은 사용자 경험을 위해 alert() 대신 인라인 오류 메시지나 토스트 알림으로 대체하는 것도 고려해 보세요.