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

Eiji Kitamura

웹 앱이 발전함에 따라 사용자가 데스크톱에서 브라우저로 파일을 드래그 앤 드롭하여 수정, 업로드, 공유하는 것이 편리할 수 있습니다. 하지만 안타깝게도 폴더를 웹페이지로 드래그 앤 드롭할 수는 없었습니다. 다행히 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 살펴보기를 참고하고, 새로운 드래그 앤 드롭 기능에 관한 자세한 내용은 이 문서를 참고하세요. 물론 이러한 기능은 개방형 표준이거나 곧 표준이 될 예정입니다.