ככל שיישומי האינטרנט מתפתחים, ייתכן שיישמתם את האפשרות הזו כדי לאפשר למשתמשים לגרור ולשחרר קבצים משולחן העבודה אל הדפדפן כדי לערוך, להעלות, לשתף וכו'. עם זאת, למרבה הצער, אין לנו אפשרות לגרור ולשחרר תיקיות בדפי אינטרנט. למרבה המזל, הבעיה הזו נפתרה החל מגרסה 21 של Chrome (כבר זמינה בערוץ Chrome Dev).
העברת קבצים מרובים באמצעות גרירה ושחרור
בואו נסתכל על דוגמת קוד של גרירה ושחרור קיימים.
<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).
למידע נוסף על ממשק ה-API של FileSystem, קראו את המאמר היכרות עם ממשקי ה-API של FileSystem לגבי יכולות חדשות של גרירה ושחרור וקראו את המסמך הזה. מובן שהתכונות האלה הן סטנדרטים פתוחים, או שהן עומדות להפוך בקרוב לכאלה.