DataTransfer API का इस्तेमाल करके समस्याएं हल करना

इस कुकी की मदद से, उपयोगकर्ता ब्राउज़र विंडो के बाहर भी डेटा शेयर कर सकता है.

Jorik Tangelder

Thomas Steiner

आपने DataTransfer API के बारे में सुना होगा. यह HTML5 Drag and Drop API और Clipboard events का हिस्सा है. इसका इस्तेमाल, सोर्स और टारगेट के बीच डेटा ट्रांसफ़र करने के लिए किया जा सकता है.

ड्रैग-ड्रॉप और कॉपी-पेस्ट इंटरैक्शन का इस्तेमाल अक्सर किसी पेज पर इंटरैक्शन के लिए किया जाता है. इससे सामान्य टेक्स्ट को A से B में ट्रांसफ़र किया जा सकता है. हालांकि, अक्सर इस बात पर ध्यान नहीं दिया जाता कि इन इंटरैक्शन का इस्तेमाल, ब्राउज़र विंडो से बाहर भी किया जा सकता है.

ब्राउज़र में पहले से मौजूद ड्रैग-एंड-ड्रॉप और कॉपी-पेस्ट की सुविधाओं का इस्तेमाल करके, अन्य ऐप्लिकेशन, वेब या अन्य प्लैटफ़ॉर्म के साथ कम्यूनिकेट किया जा सकता है. ये सुविधाएं किसी भी ऑरिजिन से जुड़ी नहीं होती हैं. यह एपीआई, कई डेटा एंट्री के साथ काम करता है. डेटा को जिस जगह ट्रांसफ़र किया जाता है उसके आधार पर, अलग-अलग तरीके से काम करता है. आपका वेब ऐप्लिकेशन, आने वाले इवेंट को सुनने के दौरान ट्रांसफ़र किए गए डेटा को भेज और पा सकता है.

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

डेटा ट्रांसफ़र करना

शुरू करने के लिए, आपको खींचें और छोड़ें या कॉपी करके चिपकाएं सुविधा का इस्तेमाल करना होगा. नीचे दिए गए उदाहरणों में, ड्रैग-ड्रॉप करके इंटरैक्ट करने का तरीका दिखाया गया है. हालांकि, कॉपी-पेस्ट करने का तरीका भी इसी तरह का होता है. अगर आपको Drag and Drop API के बारे में जानकारी नहीं है, तो HTML5 में ड्रैग और ड्रॉप करने की सुविधा के बारे में बताने वाला यह लेख पढ़ें. इसमें इस सुविधा के बारे में पूरी जानकारी दी गई है.

MIME-type के हिसाब से डेटा उपलब्ध कराने पर, आपको बाहरी ऐप्लिकेशन के साथ आसानी से इंटरैक्ट करने की सुविधा मिलती है. ज़्यादातर WYSIWYG एडिटर, टेक्स्ट एडिटर, और ब्राउज़र, नीचे दिए गए उदाहरण में इस्तेमाल किए गए "प्रिमिटिव" माइम-टाइप के साथ काम करते हैं.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Foo bar');
  event.dataTransfer.setData('text/html', '<h1>Foo bar</h1>');
  event.dataTransfer.setData('text/uri-list', 'https://example.com');
});

event.dataTransfer प्रॉपर्टी पर ध्यान दें. इससे DataTransfer का एक इंस्टेंस मिलता है. जैसा कि आपको दिखेगा, इस ऑब्जेक्ट को कभी-कभी अन्य नामों वाली प्रॉपर्टी से भी दिखाया जाता है.

डेटा ट्रांसफ़र करने की प्रोसेस, डेटा पाने की प्रोसेस के जैसी ही होती है. मिलने वाले इवेंट (drop या paste) सुनें और कुंजियां पढ़ें. किसी एलिमेंट को खींचकर ले जाते समय, ब्राउज़र के पास सिर्फ़ डेटा की type कुंजियों का ऐक्सेस होता है. डेटा को सिर्फ़ तब ऐक्सेस किया जा सकता है, जब ड्रॉप हो जाए.

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  console.log(event.dataTransfer.types);
  // Without this, the drop event won't fire.
  event.preventDefault();
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  // Log all the transferred data items to the console.
  for (let type of event.dataTransfer.types) {
    console.log({ type, data: event.dataTransfer.getData(type) });
  }
  event.preventDefault();
});

तीन MIME-टाइप, ज़्यादातर ऐप्लिकेशन में काम करते हैं:

• text/html: यह contentEditable एलिमेंट में एचटीएमएल पेलोड और Google Docs, Microsoft Word वगैरह जैसे रिच टेक्स्ट (WYSIWYG) एडिटर को रेंडर करता है.
• text/plain: इस विकल्प का इस्तेमाल करके, इनपुट एलिमेंट की वैल्यू, कोड एडिटर का कॉन्टेंट, और text/html से फ़ॉलबैक सेट किया जाता है.
• text/uri-list: यूआरएल बार या ब्राउज़र पेज पर छोड़ने पर, यूआरएल पर जाता है. किसी डायरेक्ट्री या डेस्कटॉप पर ड्रॉप करने पर, यूआरएल का शॉर्टकट बन जाएगा.

WYSIWYG एडिटर में text/html का इस्तेमाल बड़े पैमाने पर किया जाता है. इसलिए, यह बहुत काम का है. एचटीएमएल दस्तावेज़ों की तरह, डेटा यूआरएल या सार्वजनिक तौर पर ऐक्सेस किए जा सकने वाले यूआरएल का इस्तेमाल करके, संसाधनों को एम्बेड किया जा सकता है. यह सुविधा, विज़ुअल (उदाहरण के लिए, कैनवस से) को Google Docs जैसे एडिटर में एक्सपोर्ट करने के लिए अच्छी तरह से काम करती है.

const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=';
const html = '<img src="' + redPixel + '" width="100" height="100" alt="" />';
event.dataTransfer.setData('text/html', html);

कॉपी करके चिपकाने की सुविधा का इस्तेमाल करके ट्रांसफ़र करना

कॉपी-पेस्ट इंटरैक्शन के साथ DataTransfer API का इस्तेमाल करने का तरीका यहां दिखाया गया है. ध्यान दें कि क्लिपबोर्ड इवेंट के लिए, DataTransfer ऑब्जेक्ट को clipboardData नाम की प्रॉपर्टी से वापस लाया जाता है.

// Listen to copy-paste events on the document.
document.addEventListener('copy', (event) => {
  const copySource = document.querySelector('#copySource');
  // Only copy when the `activeElement` (i.e., focused element) is,
  // or is within, the `copySource` element.
  if (copySource.contains(document.activeElement)) {
    event.clipboardData.setData('text/plain', 'Foo bar');
    event.preventDefault();
  }
});

document.addEventListener('paste', (event) => {
  const pasteTarget = document.querySelector('#pasteTarget');
  if (pasteTarget.contains(document.activeElement)) {
    const data = event.clipboardData.getData('text/plain');
    console.log(data);
  }
});

कस्टम डेटा फ़ॉर्मैट

आपके पास सिर्फ़ प्रिमिटिव MIME टाइप इस्तेमाल करने का विकल्प नहीं है. ट्रांसफ़र किए गए डेटा की पहचान करने के लिए, किसी भी कुंजी का इस्तेमाल किया जा सकता है. यह आपके ऐप्लिकेशन में अलग-अलग ब्राउज़र के बीच इंटरैक्शन के लिए फ़ायदेमंद हो सकता है. नीचे दिए गए उदाहरण में दिखाया गया है कि JSON.stringify() और JSON.parse() फ़ंक्शन का इस्तेमाल करके, ज़्यादा जटिल डेटा ट्रांसफ़र किया जा सकता है.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  const data = { foo: 'bar' };
  event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
});

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  // Only allow dropping when our custom data is available.
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
  }
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
    const dataString = event.dataTransfer.getData('my-custom-type');
    const data = JSON.parse(dataString);
    console.log(data);
  }
});

वेब को कनेक्ट करना

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

इसके लिए, JSON-LD (लिंक्ड डेटा) स्टैंडर्ड सबसे सही है. यह हल्का होता है और इसे JavaScript में आसानी से पढ़ा और लिखा जा सकता है. Schema.org में पहले से तय किए गए कई टाइप होते हैं. इनका इस्तेमाल किया जा सकता है. साथ ही, कस्टम स्कीमा की परिभाषाएं भी इस्तेमाल की जा सकती हैं.

const data = {
  '@context': 'https://schema.org',
  '@type': 'ImageObject',
  contentLocation: 'Venice, Italy',
  contentUrl: 'venice.jpg',
  datePublished: '2010-08-08',
  description: 'I took this picture during our honey moon.',
  name: 'Canal in Venice',
};
event.dataTransfer.setData('application/ld+json', JSON.stringify(data));

Schema.org टाइप का इस्तेमाल करते समय, सामान्य Thing टाइप से शुरुआत की जा सकती है. इसके अलावा, इस्तेमाल के उदाहरण से मिलते-जुलते टाइप का इस्तेमाल किया जा सकता है. जैसे, Event, Person, MediaObject, Place. अगर ज़रूरत हो, तो MedicalEntity जैसे खास टाइप का भी इस्तेमाल किया जा सकता है. TypeScript का इस्तेमाल करते समय, schema-dts टाइप की परिभाषाओं से इंटरफ़ेस की परिभाषाओं का इस्तेमाल किया जा सकता है.

JSON-LD डेटा को ट्रांसमिट और रिसीव करके, ज़्यादा कनेक्टेड और ओपन वेब को बेहतर बनाया जा सकता है. एक ही भाषा का इस्तेमाल करने वाले ऐप्लिकेशन की मदद से, बाहरी ऐप्लिकेशन के साथ बेहतर इंटिग्रेशन बनाया जा सकता है. इसके लिए, एपीआई को इंटिग्रेट करने की कोई ज़रूरत नहीं है. ज़रूरी सभी जानकारी, ट्रांसफ़र किए गए डेटा में शामिल होती है.

किसी भी (वेब) ऐप्लिकेशन के बीच डेटा ट्रांसफ़र करने की सभी संभावनाओं के बारे में सोचें. इसमें कोई पाबंदी नहीं है: कैलेंडर से अपने पसंदीदा ToDo ऐप्लिकेशन पर इवेंट शेयर करना, ईमेल में वर्चुअल फ़ाइलें अटैच करना, और संपर्क शेयर करना. यह बहुत अच्छा रहेगा, है न? इसकी शुरुआत आपसे होती है! 🙌

समस्याएं

DataTransfer API आज से उपलब्ध है. हालांकि, इसे इंटिग्रेट करने से पहले आपको कुछ बातों का ध्यान रखना होगा.

ब्राउज़र के साथ काम करना

डेस्कटॉप ब्राउज़र में, ऊपर बताई गई तकनीक का इस्तेमाल आसानी से किया जा सकता है. हालांकि, मोबाइल डिवाइसों में ऐसा नहीं किया जा सकता. इस तकनीक को सभी मुख्य ब्राउज़र (Chrome, Edge, Firefox, Safari) और ऑपरेटिंग सिस्टम (Android, ChromeOS, iOS, macOS, Ubuntu Linux, और Windows) पर टेस्ट किया गया है. हालांकि, अफ़सोस की बात है कि Android और iOS पर यह टेस्ट पास नहीं हो सका. ब्राउज़र में लगातार नई सुविधाएं जुड़ती रहती हैं. हालांकि, फ़िलहाल यह तकनीक सिर्फ़ डेस्कटॉप ब्राउज़र के लिए उपलब्ध है.

ऐसे वीडियो बनाना जिन्हें दर्शक आसानी से खोज सकें

डेस्कटॉप कंप्यूटर पर काम करते समय, ड्रैग-ड्रॉप और कॉपी-पेस्ट, सिस्टम-लेवल के इंटरैक्शन होते हैं. इनकी शुरुआत 40 साल पहले पहले जीयूआई से हुई थी. सोचें कि आपने फ़ाइलों को व्यवस्थित करने के लिए, इन इंटरैक्शन का इस्तेमाल कितनी बार किया है. हालांकि, वेब पर अब तक यह सुविधा ज़्यादातर लोगों के लिए उपलब्ध नहीं है.

आपको उपयोगकर्ताओं को इस नए इंटरैक्शन के बारे में बताना होगा. साथ ही, UX पैटर्न बनाने होंगे, ताकि इसे पहचाना जा सके. खास तौर पर, उन लोगों के लिए जिनका अनुभव अब तक सिर्फ़ मोबाइल डिवाइसों तक सीमित है.

सुलभता

ड्रैग-ड्रॉप करना, इंटरैक्ट करने का एक ऐसा तरीका है जिसे हर कोई आसानी से इस्तेमाल नहीं कर सकता. हालांकि, DataTransfer API, कॉपी-पेस्ट करने की सुविधा के साथ भी काम करता है. पक्का करें कि आपने कॉपी और चिपकाने के इवेंट को सुना हो. इसमें ज़्यादा मेहनत नहीं लगती. साथ ही, आपके उपयोगकर्ता इसे जोड़ने के लिए आपके आभारी होंगे.

सुरक्षा और निजता

इस तकनीक का इस्तेमाल करते समय, आपको सुरक्षा और निजता से जुड़ी कुछ बातों का ध्यान रखना चाहिए.

• क्लिपबोर्ड का डेटा, उपयोगकर्ता के डिवाइस पर मौजूद अन्य ऐप्लिकेशन के लिए उपलब्ध होता है.
• जिन वेब ऐप्लिकेशन को ड्रैग किया जा रहा है उनके पास टाइप की गई कुंजियों का ऐक्सेस होता है, न कि डेटा का. डेटा सिर्फ़ तब उपलब्ध होता है, जब उसे ड्रॉप या चिपकाया जाता है.
• मिले हुए डेटा को उपयोगकर्ता के किसी भी अन्य इनपुट की तरह माना जाना चाहिए. इसका इस्तेमाल करने से पहले, इसे साफ़ करें और इसकी पुष्टि करें.

Transmat हेल्पर लाइब्रेरी का इस्तेमाल शुरू करना

क्या आपको अपने ऐप्लिकेशन में DataTransfer API का इस्तेमाल करने में दिलचस्पी है? GitHub पर Transmat लाइब्रेरी देखें. यह ओपन-सोर्स लाइब्रेरी, ब्राउज़र के बीच के अंतर को कम करती है. साथ ही, JSON-LD की सुविधाएं देती है. इसमें एक ऑब्ज़र्वर होता है, जो ड्रॉप-एरिया को हाइलाइट करने के लिए ट्रांसफ़र इवेंट का जवाब देता है. साथ ही, यह आपको मौजूदा ड्रैग और ड्रॉप की सुविधाओं के साथ डेटा ट्रांसफ़र के ऑपरेशन को इंटिग्रेट करने की सुविधा देती है.

import { Transmat, TransmatObserver, addListeners } from 'transmat';

// Send data on drag/copy.
addListeners(myElement, 'transmit', (event) => {
  const transmat = new Transmat(event);
  transmat.setData({
    'text/plain': 'Foobar',
    'application/json': { foo: 'bar' },
  });
});

// Receive data on drop/paste.
addListeners(myElement, 'receive', (event) => {
  const transmat = new Transmat(event);
  if (transmat.hasType('application/json') && transmat.accept()) {
    const data = JSON.parse(transmat.getData('application/json'));
  }
});

// Observe transfer events and highlight drop areas.
const obs = new TransmatObserver((entries) => {
  for (const entry of entries) {
    const transmat = new Transmat(entry.event);
    if (transmat.hasMimeType('application/json')) {
      entry.target.classList.toggle('drag-over', entry.isTarget);
      entry.target.classList.toggle('drag-active', entry.isActive);
    }
  }
});
obs.observe(myElement);

Acknowledgements

लुबा एर्टेल की Unsplash पर मौजूद हीरो इमेज.