이제 폴더를 Chrome으로 드래그 앤 드롭할 수 있습니다

키타무라 에이지

Twitter GitHub Glitch 마스토돈

웹 앱이 발전함에 따라 사용자가 파일을 데스크톱에서 브라우저로 드래그 앤 드롭하여 수정, 업로드, 공유 등을 할 수 있다는 것이 편안했을 것입니다. 그러나 안타깝게도 폴더를 웹페이지로 드래그 앤 드롭할 수는 없었습니다. 다행히 Chrome 21부터는 이 문제가 해결될 예정입니다 (이미 Chrome 개발자 채널에서 사용 가능함).

드래그 앤 드롭으로 여러 파일 전달

기존 드래그 앤 드롭의 코드 샘플을 살펴보겠습니다.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

이 예에서는 실제로 데스크톱에서 브라우저로 파일을 드래그 앤 드롭할 수 있지만 폴더를 전달하려고 하면 거부되거나 File 객체로 처리되어 오류가 발생합니다.

삭제된 폴더 처리 방법

Chrome 21에서는 브라우저 창에 폴더 하나 이상의 폴더를 드롭할 수 있습니다. 이를 처리하려면 드롭된 객체를 처리하는 방식을 변경해야 합니다.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

여기서 큰 차이점은 getAsEntry (webkitGetAsEntry)라는 새 함수를 사용하여 드롭된 객체를 Entry (FileEntry 또는 DirectoryEntry)로 취급할 수 있다는 것입니다. Entry 객체에 대한 액세스 권한을 얻은 후에는 FileSystem API 사양에 도입된 표준 파일 처리 메서드를 사용할 수 있습니다. 예를 들어 이 예시에서는 .isFile (또는 .isDirectory) 필드를 검사하여 드롭된 객체가 파일인지 디렉터리인지 감지하는 방법을 보여줍니다.

FileSystem API에 관한 자세한 내용은 FileSystem API 탐색과 새로운 드래그 앤 드롭 기능에 관한 이 문서를 참고하세요. 물론 이러한 기능은 개방형 표준이거나 곧 출시될 예정입니다.