ادغام ورودی[type=file] با Filesystem API

فرض کنید یک برنامه ویرایش عکس دارید و دوست دارید کاربران بتوانند صدها عکس را بکشند و در برنامه شما کپی کنند. باشه چیکار میکنی

در یک پست اخیر ، ایجی کیتامورا یک ویژگی ظریف و در عین حال قدرتمند جدید در کشیدن و رها کردن API ها را برجسته کرد. توانایی کشیدن در پوشه ها و بازیابی آنها به عنوان HTML5 Filesystem API FileEntry و DirectoryEntry (با دسترسی به یک روش جدید در DataTransferItem ، .webkitGetAsEntry() انجام می شود).

نکته جالب در مورد پسوند .webkitGetAsEntry() این است که چقدر زیبا و ظریف وارد کردن فایل ها و کل پوشه ها می شود. هنگامی که یک FileEntry یا DirectoryEntry از یک رویداد drop دارید، باید copyTo() Filesystem API برای وارد کردن آن به برنامه خود استفاده کنید.

نمونه ای از کپی کردن چندین پوشه حذف شده در فایل سیستم:

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

من یک نسخه ی نمایشی گالری عکس را برای نشان دادن این تکنیک های مختلف برای وارد کردن فایل ها/پوشه ها گردآوری کرده ام.

نسخه ی نمایشی را راه اندازی کنید

برای کسب اطلاعات بیشتر در مورد API فایل سیستم HTML5، به کاوش در APIهای سیستم فایل مراجعه کنید.