Giriş[type=file] dosyasını Filesystem API ile entegre etme

Fotoğraf düzenleme uygulamanız olduğunu ve kullanıcıların yüzlerce fotoğrafı sürükleyip uygulamanıza kopyalayabilmesini istediğinizi varsayalım. Peki, ne yaparsınız?

Eiji Kitamura, yakın tarihli bir yayında sürükle ve bırak API'lerindeki ince ancak güçlü bir yeni özelliği vurguladı: Klasörleri sürükleyip ve HTML5 Dosya Sistemi API'si FileEntry ve DirectoryEntry nesneleri olarak alma özelliği (DataTransferItem, .webkitGetAsEntry() öğesindeki yeni bir yönteme erişilerek yapılır).

.webkitGetAsEntry() uzantısının en iyi özelliklerinden biri, dosyaları ve klasörlerin tamamını içe aktarmayı kolaylaştırmasıdır. Bir bırakma etkinliğinden FileEntry veya DirectoryEntry aldıktan sonra, dosyayı uygulamanıza aktarmak için Dosya Sistemi API'sinin copyTo() yöntemini kullanmanız yeterlidir.

Birden fazla klasörü dosya sistemine kopyalama örneği:

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);
});

Çok güzel. Basitlik, DnD'nin Filesystem API çağrılarıyla entegre edilmesinden kaynaklanır.

Bu özelliği bir adım daha ileri götürerek, bir klasörü ve/veya dosyaları normal bir <input type="file">'ye sürükleyip bırakabilir, ardından girişlere Dosya Sistemi dizini veya dosya girişleri olarak erişebiliriz. Bu işlem .webkitEntries üzerinden yapılır:

<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);

Dosya/klasör içe aktarma ile ilgili bu farklı teknikleri göstermek için bir fotoğraf galerisi demosu hazırladım.

Demoyu başlatın

HTML5 Dosya Sistemi API'si hakkında daha fazla bilgi edinmek için Dosya Sistemi API'lerini Keşfetme başlıklı makaleyi inceleyin.