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

Diyelim ki bir fotoğraf düzenleme uygulamanız var ve kullanıcıların yüzlerce fotoğrafı sürükleyip uygulamanıza alabilmesini istiyorsunuz. Peki, ne yapıyorsunuz?

Demoyu Başlat
Demoyu Başlat

Eiji Kitamura, kısa süre önce yayınladığı bir yayında, sürükle ve bırak API'larındaki ince ama güçlü yeni bir özelliği vurguladı: klasörleri sürükleyip ve HTML5 Filesystem API'si FileEntry ve DirectoryEntry nesneleri olarak alabilme (Bunun için DataTransferItem, .webkitGetAsEntry()) yeni bir yöntemden yararlanılabilir.

.webkitGetAsEntry() uzantısının özellikle etkileyici bir özelliği, 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, bunu uygulamanıza aktarmak için Filesystem API'nin copyTo() kullanmanız gerekir.

Bırakılmış 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 iyi! Burada da basitlik, DnD'nin Filesystem API çağrılarıyla entegrasyonundan kaynaklanmaktadır.

Bunu bir adım daha ileri götürerek, bir klasörü ve/veya dosyaları normal bir <input type="file"> dosyasına sürükleyip bırakma ve ardından girişlere Dosya sistemi dizini ya da dosya girişleri olarak erişme olanağımız da vardır. Bu işlem .webkitEntries üzerinden gerçekleştirilir:

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

Dosyaları/klasörleri içe aktarmaya ilişkin bu farklı teknikleri göstermek için bir fotoğraf galerisi demosu hazırladım.

Demoyu Başlat

HTML5 Dosya Sistemi API'sı hakkında daha fazla bilgi edinmek için Dosya Sistemi API'larını Keşfetme başlıklı makaleye göz atın.