שילוב קלט[type=file] עם Filesystem API

נניח שיש לכם אפליקציה לעריכת תמונות ואתם רוצים שמשתמשים יוכלו לגרור מאות תמונות ולהעתיק אותן לאפליקציה. מה צריך לעשות?

בפוסט שפורסם לאחרונה, Eiji Kitamura הדגיש תכונה חדשה אך עדינה בממשק ה-API של גרירה ושחרור; היכולת לגרור בתיקיות ו לאחזר אותן כאובייקטים של HTML5 Filesystem API FileEntry ו-DirectoryEntry (בוצעה על ידי גישה לשיטה חדשה ב-DataTransferItem, .webkitGetAsEntry()).

מה שמגניב במיוחד בתוסף .webkitGetAsEntry() הוא עד כמה הוא אלגנטי לייבוא קבצים ותיקיות שלמות. ברגע שיש לך FileEntry או DirectoryEntry מאירוע שחרור, אפשר להשתמש ב-copyTo() של ממשק ה-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 עם קריאות ל-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, ראו היכרות עם ממשקי ה-API של מערכת הקבצים.