עכשיו אפשר לגרור תיקייה ולשחרר אותה ב-Chrome

Eiji Kitamura

ככל שאפליקציות האינטרנט מתפתחות, יכול להיות שמצאתם שימוש שימושי באפשרות לאפשר למשתמשים לגרור ולשחרר קבצים מהמחשב לדפדפן כדי לערוך, להעלות, לשתף וכו'. אבל לצערנו, לא הצלחנו לגרור ולשחרר תיקיות לדפי אינטרנט. למרבה המזל, החל מגרסת Chrome 21 הבעיה הזו תטופל (היא כבר זמינה בערוץ הפיתוח של Chrome).

העברת מספר קבצים באמצעות גרירה ושחרור

נבחן דוגמת קוד של גרירה ושחרור קיימת.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

בדוגמה הזו, אפשר למעשה לגרור ולשחרר קובץ או קבצים מהמחשב לדפדפן, אבל כשמנסים להעביר תיקייה, היא תידחה או תיחשב כאובייקט File, וכתוצאה מכך תהיה כשל.

איך מטפלים בתיקיות שנשמטות

ב-Chrome 21 אפשר לשחרר תיקייה או כמה תיקיות בחלון הדפדפן. כדי לטפל בבעיות האלה, צריך לשנות את האופן שבו מטפלים באובייקטים שנשמטים.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

שימו לב שההבדל הגדול כאן הוא שאפשר להתייחס לאובייקט שהושלך כ-Entry (FileEntry או DirectoryEntry) באמצעות פונקציה חדשה שנקראת getAsEntry (webkitGetAsEntry). אחרי שמקבלים גישה לאובייקט Entry, אפשר להשתמש בשיטות סטנדרטיות לטיפול בקבצים שהוצגו במפרט של FileSystem API. לדוגמה, בדוגמה הזו מוצג איך אפשר לבדוק אם אובייקט שהועבר הוא קובץ או ספרייה, על ידי בדיקת השדה .isFile (או השדה .isDirectory).

מידע נוסף על FileSystem API זמין במאמר הצגת ממשקי FileSystem API. מידע נוסף על היכולת החדשה של גרירה ושחרור זמין במסמך הזה. כמובן, התכונות האלה הן תקנים פתוחים או שהן עומדות להפוך לתקנים כאלה בקרוב.