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

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

Jorik Tangelder

Thomas Steiner

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

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

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

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

डेटा ट्रांसफ़र किया जा रहा है

शुरू करने के लिए, आपको ड्रैग-ड्रॉप या कॉपी-पेस्ट की सुविधा का इस्तेमाल करना होगा. यहां दिए गए उदाहरणों में, खींचकर छोड़ने की सुविधा के बारे में बताया गया है. हालांकि, कॉपी-पेस्ट करने की प्रोसेस भी इसी तरह की होती है. अगर आपको एचटीएमएल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();
});

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

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

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

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

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

समस्याएं

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

स्वीकार की गई

Unस्प्लैश पर लूबा अर्टेल की हीरो इमेज.