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