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

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

Jorik Tangelder

Thomas Steiner

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

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

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

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

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

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

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

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 टाइप से शुरुआत की जा सकती है, या अपने इस्तेमाल के उदाहरण से मिलता-जुलता कुछ इस्तेमाल करें. जैसे, इवेंट, व्यक्ति, MediaObject, Place या बहुत खास टाइप, जैसे कि ज़रूरत पड़ने पर MedicalEntity. जब आप TypeScript का इस्तेमाल करते हैं, तो इंटरफ़ेस की परिभाषाएं, schema-dts टाइप की परिभाषाओं से ली गई हैं.

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

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

समस्याएं

हालांकि, DataTransfer API अभी उपलब्ध है, लेकिन इंटिग्रेट करने से पहले आपको कुछ चीज़ों के बारे में पता होना चाहिए.

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

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

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

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

आपको इस नए इंटरैक्शन के बारे में लोगों को बताना होगा. साथ ही, इसे बेहतर बनाने के लिए उपयोगकर्ता अनुभव (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);

स्वीकार की गई

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