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

आइजी कितामुरा

Twitter GitHub Glitch Mastodon

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

खींचें और छोड़ें की मदद से, कई फ़ाइलें पास करना

आइए, 'खींचें और छोड़ें' सुविधा के मौजूदा कोड सैंपल पर नज़र डालें.

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