किसी फ़ोल्डर को Chrome में खींचें और छोड़ें जो अब उपलब्ध है

Eiji Kitamura

वेब ऐप्लिकेशन के बेहतर होते जाने के साथ, आपको यह सुविधा मिल सकती है कि उपयोगकर्ता फ़ाइलों में बदलाव करने, उन्हें अपलोड करने, शेयर करने वगैरह के लिए, उन्हें डेस्कटॉप से ब्राउज़र पर खींचकर छोड़ सकें. हालांकि, फ़िलहाल हम वेब पेजों पर फ़ोल्डर खींचकर छोड़ने की सुविधा नहीं दे पा रहे हैं. अच्छी बात यह है कि Chrome 21 से इस समस्या को ठीक कर दिया जाएगा. यह समस्या, Chrome के डेवलपर चैनल में पहले से ही मौजूद है.

एक से ज़्यादा फ़ाइलों को खींचकर छोड़ने की सुविधा

आइए, मौजूदा ड्रैग और ड्रॉप के कोड सैंपल को देखें.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

इस उदाहरण में, डेस्कटॉप से किसी फ़ाइल या फ़ाइलों को खींचकर ब्राउज़र में छोड़ा जा सकता है. हालांकि, फ़ोल्डर को पास करने पर, उसे अस्वीकार कर दिया जाएगा या File ऑब्जेक्ट के तौर पर माना जाएगा. इस वजह से, फ़ोल्डर पास नहीं हो पाएगा.

ड्रॉप किए गए फ़ोल्डर मैनेज करने का तरीका

Chrome 21 में, ब्राउज़र विंडो में एक या उससे ज़्यादा फ़ोल्डर छोड़े जा सकते हैं. इन समस्याओं को हल करने के लिए, आपको ड्रॉप किए गए ऑब्जेक्ट को मैनेज करने का तरीका बदलना होगा.

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

ध्यान दें कि यहां एक बड़ा अंतर यह है कि getAsEntry (webkitGetAsEntry) नाम के नए फ़ंक्शन का इस्तेमाल करके, ड्रॉप किए गए ऑब्जेक्ट को Entry (FileEntry या DirectoryEntry) के तौर पर माना जा सकता है. Entry ऑब्जेक्ट का ऐक्सेस पाने के बाद, फ़ाइल को मैनेज करने के उन स्टैंडर्ड तरीकों का इस्तेमाल किया जा सकता है जिन्हें FileSystem API स्पेसिफ़िकेशन में पेश किया गया था. उदाहरण के लिए, इस उदाहरण में बताया गया है कि .isFile (या .isDirectory) फ़ील्ड की जांच करके, यह कैसे पता लगाया जा सकता है कि ड्रॉप किया गया ऑब्जेक्ट फ़ाइल है या डायरेक्ट्री.

FileSystem API के बारे में ज़्यादा जानने के लिए, FileSystem API को एक्सप्लोर करना लेख पढ़ें. खींचकर छोड़ने की नई सुविधा के बारे में जानने के लिए, यह दस्तावेज़ पढ़ें. बेशक, ये सुविधाएं ओपन स्टैंडर्ड हैं या जल्द ही ओपन स्टैंडर्ड बन जाएंगी.