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

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

في نشرة حديثة، سلّط إيجى كاتامورا الضوء على ميزة جديدة دقيقة وفعّالة في واجهات برمجة التطبيقات الخاصة بسحب الملفات وإفلاتها، وهي إمكانية سحب المجلدات واستردادها كعنصرَي FileEntry وDirectoryEntry في واجهة برمجة التطبيقات HTML5 Filesystem API (يتم ذلك من خلال الوصول إلى طريقة جديدة في 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);
});

رائع. مرة أخرى، تعود البساطة إلى دمج ميزة "السحب والإفلات" مع طلبات بيانات واجهة برمجة التطبيقات لنظام الملفات.

يمكننا أيضًا سحب مجلد و/أو ملفات وإفلاتها على <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، اطّلِع على مقالة استكشاف واجهات برمجة تطبيقات Filesystem API.