دمج الإدخال[type=file] مع واجهة برمجة التطبيقات Filesystem

Eric Bidelman

لنفترض أنّ لديك تطبيقًا لتعديل الصور وتريد أن يتمكّن المستخدمون من سحب مئات الصور ونسخها إلى التطبيق. حسنًا، ما هي الإجراءات التي يمكنك اتخاذها؟

إطلاق العرض التوضيحي

في مشاركة حديثة، سلّط Eiji Kitamura الضوء على ميزة جديدة بسيطة ولكنها فعّالة في واجهات برمجة التطبيقات للسحب والإفلات، وهي إمكانية سحب المجلدات واستردادها ككائنات HTML5 Filesystem API FileEntry وDirectoryEntry كائنات (يتم ذلك من خلال الدخول إلى طريقة جديدة في DataTransferItem, .webkitGetAsEntry()).

الأمر الجيد في إضافة .webkitGetAsEntry() هو مدى متانتها في جعلها استيراد الملفات والمجلدات بأكملها. بعد حصولك على FileEntry أو DirectoryEntry من حدث الإفلات، يتطلب الأمر استخدام 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);

لقد أعددتُ عرضًا توضيحيًا لمعرض الصور لتوضيح هذه الأساليب المختلفة لاستيراد الملفات/المجلدات.

إطلاق العرض التوضيحي

لمعرفة المزيد حول واجهة برمجة تطبيقات ملفات HTML5، راجع استكشاف واجهات برمجة تطبيقات نظام الملفات.