ফাইলসিস্টেম এপিআই-এর সাথে ইনপুট[টাইপ=ফাইল] একীভূত করা

Eric Bidelman

ধরা যাক আপনার কাছে একটি ফটো এডিটিং অ্যাপ আছে এবং আপনি চান ব্যবহারকারীরা শত শত ফটো টেনে আনতে এবং আপনার অ্যাপে কপি করতে সক্ষম হন। ঠিক আছে, আপনি কি করবেন?

ডেমো চালু করুন

সাম্প্রতিক একটি পোস্টে , Eiji Kitamura একটি সূক্ষ্ম, কিন্তু শক্তিশালী নতুন বৈশিষ্ট্য টেনে আনে এবং ড্রপ API-এ হাইলাইট করেছেন; ফোল্ডারগুলিতে টেনে আনার এবং HTML5 ফাইলসিস্টেম API FileEntry এবং DirectoryEntry অবজেক্ট হিসাবে পুনরুদ্ধার করার ক্ষমতা ( ডেটা ট্রান্সফারআইটেম , .webkitGetAsEntry() তে একটি নতুন পদ্ধতি অ্যাক্সেস করে করা হয়েছে)।

.webkitGetAsEntry() এক্সটেনশন সম্পর্কে অসাধারণ যা চমৎকার তা হল এটি ফাইল এবং সম্পূর্ণ ফোল্ডার আমদানি করাকে কতটা মার্জিত করে তোলে। একবার আপনার কাছে একটি ড্রপ ইভেন্ট থেকে একটি FileEntry বা DirectoryEntry হয়ে গেলে, এটি আপনার অ্যাপে আমদানি করতে Filesystem API এর copyTo() ব্যবহার করার বিষয়।

ফাইল সিস্টেমে একাধিক ড্রপ ফোল্ডার কপি করার একটি উদাহরণ:

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);
});

খুব সুন্দর! আবার, ফাইলসিস্টেম API কলগুলির সাথে DnD সংহত করার মাধ্যমে সরলতা আসে।

এটিকে আরও এক ধাপ এগিয়ে নিয়ে, আমাদের কাছে একটি ফোল্ডার এবং/অথবা ফাইলগুলিকে একটি সাধারণ <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 ফাইলসিস্টেম এপিআই সম্পর্কে আরও জানতে, ফাইলসিস্টেম এপিআই এক্সপ্লোরিং দেখুন।