يمكنك الآن سحب مجلد وإفلاته على Chrome.

Eiji Kitamura

مع تطور تطبيقات الويب، ربما لاحظت أنّه من المفيد السماح للمستخدمين بسحب الملفات وإفلاتها من الكمبيوتر المكتبي إلى المتصفّح لتعديلها وتحميلها ومشاركتها وما إلى ذلك. ولكن تعذّر علينا سحب المجلدات وإفلاتها على صفحات الويب. لحسن الحظ، سيتم حلّ هذه المشكلة اعتبارًا من الإصدار 21 من Chrome (المتاح حاليًا في قناة مطوّري برامج 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، ما يؤدي إلى حدوث خطأ.

كيفية التعامل مع المجلدات التي تم إسقاطها

يتيح لك الإصدار 21 من Chrome إسقاط مجلد أو عدة مجلدات في نافذة المتصفّح. لحلّ هذه المشاكل، عليك تغيير طريقة التعامل مع العناصر المسقطة.

<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، وبالنسبة إلى ميزة السحب والإفلات الجديدة، يُرجى قراءة هذا المستند. بالطبع، هذه الميزات هي معايير مفتوحة أو في انتظار أن تصبح معايير مفتوحة قريبًا.