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

हम क्लिपबोर्डइवेंट और इवेंटटार्गेट इंटरफेस का लाभ उठाकर कॉपी-पेस्ट फ़ाइल इनपुट लागू करेंगे। क्लिपबोर्डइवेंट इंटरफ़ेस पेस्ट इवेंट के बारे में जानकारी प्रदान करता है, और इवेंटटार्गेट इंटरफ़ेस हमें पेस्ट इवेंट को सुनने की अनुमति देता है।

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

HTML और शैलियाँ

आइए पेस्ट क्षेत्र का HTML मार्कअप बनाकर शुरुआत करें। नीचे दिया गया कोड स्निपेट HTML मार्कअप है:

    

        Paste your file here
    
    

    

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

आइए style.css से हमारे मार्कअप में कुछ बुनियादी शैलियाँ जोड़ें

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

उपरोक्त मार्कअप और स्टाइल शीट एक साधारण प्रॉम्प्ट टेक्स्ट के साथ एक साधारण डैश-बॉर्डर कंटेनर बनाता है जैसा कि नीचे स्क्रीनशॉट में दिखाया गया है:

अब जब हमने यूआई बना लिया है, तो आइए अगले भाग में जावास्क्रिप्ट के साथ कुछ उपयोगी कार्यक्षमताएं जोड़ें।

लिपि

इस अनुभाग में, हम पेस्ट क्षेत्र में पेस्ट इवेंट श्रोता को जोड़ने के लिए जावास्क्रिप्ट का उपयोग करेंगे। इवेंट श्रोता को संलग्न करने के लिए DOM से पेस्ट क्षेत्र प्राप्त करने से पहले, हम पहले DOM सामग्री के लोड होने की प्रतीक्षा करते हैं जैसा कि नीचे दिए गए कोड स्निपेट में है।

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

उपरोक्त कोड स्निपेट में, हमने DOMContentLoaded इवेंट के लिए एक श्रोता जोड़ा है। इससे हमें DOM तत्व प्राप्त करने से पहले DOM ट्री बनने तक प्रतीक्षा करने की अनुमति मिलती है। इसके बाद, हम पेस्ट एरिया कंटेनर का चयन करते हैं और उसमें पेस्ट इवेंट श्रोता जोड़ते हैं।

चिपकाए गए आइटम से फ़ाइल प्राप्त करना

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

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

उपरोक्त कोड स्निपेट में, हमें इवेंट.क्लिपबोर्डडेटा ऑब्जेक्ट से आइटम मिलते हैं। इवेंट.clipboardData.items एक DataTransferItemList है जो एक सूची जैसी वस्तु है जिसमें चिपकाए गए आइटम की सामग्री होती है। आइटमों को एक सूची में संग्रहीत किया जाता है क्योंकि उपयोगकर्ता के लिए एक साथ कई आइटमों को कॉपी और पेस्ट करना संभव है।

इसके बाद, हम for ...of लूप का उपयोग करके आइटम पर पुनरावृति करते हैं। लूप में, हम जाँचते हैं कि क्या प्रत्येक आइटम एक फ़ाइल है। यदि आइटम किंग 'फ़ाइल' का है, तो हम इसे एक फ़ाइल के रूप में प्राप्त करते हैं और ब्राउज़र के कंसोल पर प्रिंट करते हैं।

कंसोल पर फ़ाइल जानकारी प्रिंट करना आपके वेब पेज के उपयोगकर्ताओं के लिए बहुत उपयोगी नहीं है। आइए अगले भाग में कुछ और दिलचस्प करें।

अपलोड की गई फ़ाइल का पूर्वावलोकन किया जा रहा है

यदि हम इसे कहीं भी नहीं दिखाते हैं तो किसी उपयोगकर्ता के लिए यह जानना कठिन होगा कि क्लिपबोर्ड पर आइटम चिपकाने के बाद फ़ाइल अपलोड सफल रही। यह इंगित करना महत्वपूर्ण है कि फ़ाइल सफलतापूर्वक कुछ प्रदर्शित करके अपलोड की गई थी जो सफलता को इंगित करती है। किसी अपलोड की सफलता को इंगित करने के लिए अपलोड की गई फ़ाइल को प्रदर्शित करने से बेहतर तरीका क्या हो सकता है?

इस अनुभाग में, हम प्राप्त फ़ाइल से एक यूआरएल बनाने के लिए पेस्ट इवेंट हैंडलर का विस्तार करेंगे। ब्राउज़र में फ़ाइल लोड होने के बाद उसे रेंडर करने के लिए हम बनाए गए URL का उपयोग करेंगे। हम फ़ाइल से एक यूआरएल बनाने के लिए फ़ाइलरीडर एपीआई का लाभ उठाएंगे जैसा कि नीचे दिए गए स्निपेट में कोड किया गया है।

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

उपरोक्त कोड स्निपेट में, हमने फ़ाइलरीडर का एक उदाहरण बनाया है और डेटा यूआरएल उत्पन्न करने के लिए इसका उपयोग किया है। हमने FileReader ऑब्जेक्ट में एक लोडएंड इवेंट श्रोता भी जोड़ा है जहां हम रीडिंग के परिणाम को कंसोल पर लॉग करते हैं। यह फ़ाइल का पूर्वावलोकन करने की दिशा में पहला कदम है, अब हम फ़ाइल को प्रदर्शित करने के लिए URL का उपयोग कर सकते हैं।

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

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

उपरोक्त कोड स्निपेट में, हम DOM से पूर्वावलोकन कंटेनर प्राप्त करते हैं और छवि को प्रस्तुत करने के लिए एक img तत्व बनाते हैं। हम बनाए गए यूआरएल को छवि के स्रोत के रूप में निर्दिष्ट करते हैं और छवि को पूर्वावलोकन कंटेनर में जोड़ते हैं। एक बार जब छवि पूर्वावलोकन कंटेनर में जुड़ जाती है, तो उपयोगकर्ता अब जान सकता है कि जो छवि उन्होंने चिपकाई है वह सफलतापूर्वक वेब पेज पर लोड हो गई है।

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

टिप्पणी अनुभाग में बेझिझक कुछ कहें। MDN से क्लिपबोर्डइवेंट और फ़ाइलरीडर इंटरफ़ेस के बारे में अधिक जानें।