Filesystem API에 input[type=file] 통합

사진 편집 앱을 만들고 있는데 사용자가 수백 장의 사진을 드래그하여 앱에 복사할 수 있도록 하려면 어떻게 해야 하나요?

최근 게시물에서 에이지 키타무라는 드래그 앤 드롭 API의 미묘하지만 강력한 새 기능을 강조했습니다. 폴더를 드래그하여 HTML5 Filesystem API FileEntry 및 DirectoryEntry 객체로 검색하는 기능입니다 (DataTransferItem의 새 메서드인 .webkitGetAsEntry()에 액세스하여 실행).

.webkitGetAsEntry() 확장 프로그램의 멋진 점은 파일과 전체 폴더를 얼마나 우아하게 가져올 수 있는지입니다. 드롭 이벤트에서 FileEntry 또는 DirectoryEntry를 가져온 후에는 Filesystem API의 copyTo()를 사용하여 앱으로 가져오면 됩니다.

여러 개의 드롭된 폴더를 파일 시스템에 복사하는 예는 다음과 같습니다.

var fs = null; // Cache filesystem for later.

// Not shown: setup drag and drop event listeners.
function onDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    var items = e.dataTransfer.items;

    for (var i = 0, item; item = items[i]; ++i) {
    var entry = item.webkitGetAsEntry();

    // Folder? Copy the DirectoryEntry over to our local filesystem.
    if (entry.isDirectory) {
        entry.copyTo(fs.root, null, function(copiedEntry) {
        // ...
        }, onError);
    }
    }
}

window.webkitRequestFileSystem(TEMPORARY, 1024 * 1204, function(fileSystem) {
    fs = fileSystem;
}, function(e) {
    console.log('Error', e);
});

좋습니다. DnD를 Filesystem API 호출과 통합하면 간단해집니다.

한 단계 더 나아가 폴더나 파일을 일반 <input type="file">에 드래그 앤 드롭한 다음 항목에 파일 시스템 디렉터리 또는 파일 항목으로 액세스할 수도 있습니다. 이는 .webkitEntries를 통해 이루어집니다.

<input type="file" multiple>

function onChange(e) {
    e.stopPropagation();
    e.preventDefault();

    var entries = e.target.webkitEntries; // Get all dropped items as FS API entries.

    [].forEach.call(entries, function(entry) {

    // Copy the entry into our local filesystem.
    entry.copyTo(fs.root, null, function(copiedEntry) {
        ...
    }, onError);

    });
}

document.querySelector('input[type="file"]').addEventListener('change', onChange);

파일/폴더를 가져오는 다양한 기법을 보여주는 사진 갤러리 데모를 만들었습니다.

데모 실행

HTML5 Filesystem API에 대한 자세한 내용은 Filesystem API 살펴보기를 참고하세요.