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

उपयोगकर्ता को ब्राउज़र विंडो के बाहर डेटा शेयर करने की सुविधा दें.

Jorik Tangelder

Thomas Steiner

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

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

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

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

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

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

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

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();
});

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

• text/html: यह एलिमेंट और रिच टेक्स्ट (डब्ल्यूआईएसआईडब्ल्यूजी) एडिटर में एचटीएमएल पेलोड को रेंडर करता है. जैसे, Google Docs, Microsoft Word वगैरह.contentEditable
• 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);

आभार

Unsplash पर Luba Ertel की दी गई हीरो इमेज.