मान लें कि आपके पास फ़ोटो में बदलाव करने वाला ऐप्लिकेशन है और आपको उपयोगकर्ताओं को सैकड़ों फ़ोटो खींचकर खींचकर लाने और उन्हें अपने ऐप्लिकेशन में कॉपी करने की सुविधा देनी है. ऐसे में, आपको क्या करना होगा?
हाल ही की एक पोस्ट में, एइजी कितामुरा ने ड्रैग और ड्रॉप एपीआई में एक नई सुविधा के बारे में बताया है. यह सुविधा, ज़रूरत के हिसाब से छोटी है, लेकिन बहुत काम की है. इसकी मदद से, फ़ोल्डर को खींचकर और उन्हें HTML5 फ़ाइल सिस्टम एपीआई FileEntry और DirectoryEntry ऑब्जेक्ट के तौर पर वापस लाया जा सकता है. इसके लिए, DataTransferItem, .webkitGetAsEntry() पर एक नया तरीका ऐक्सेस किया जाता है.
.webkitGetAsEntry() एक्सटेंशन की सबसे खास बात यह है कि यह फ़ाइलों और पूरे फ़ोल्डर को आसानी से इंपोर्ट करता है. ड्रॉप इवेंट से FileEntry या DirectoryEntry मिलने के बाद, उसे अपने ऐप्लिकेशन में इंपोर्ट करने के लिए, फ़ाइल सिस्टम एपीआई के 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);
});
बहुत बढ़िया! फ़ाइल सिस्टम एपीआई कॉल के साथ डीएनडी को इंटिग्रेट करने से, इसे इस्तेमाल करना आसान हो जाता है.
इसके अलावा, हम किसी फ़ोल्डर और/या फ़ाइलों को खींचकर सामान्य <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 के बारे में जानकारी देखें.