किसी फ़ोल्डर को 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 के बारे में जानना लेख पढ़ें. इसके बाद, यह दस्तावेज़ पढ़ें. बेशक, ये सुविधाएं सभी के लिए उपलब्ध हैं या जल्द ही ये सुविधाएं उपलब्ध होने वाली हैं.