प्रतिक्रिया में अनुलग्नकों के साथ ईमेल भेजने के लिए मार्गदर्शिका

फ़ाइल अनुलग्नकों के साथ एक संपर्क फ़ॉर्म बनाना

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

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

आज्ञा	विवरण
Resend.emails.send()	से, से, विषय, एचटीएमएल और अनुलग्नकों सहित निर्दिष्ट मापदंडों के साथ एक ईमेल भेजता है।
setHeader()	निर्दिष्ट मापदंडों के साथ प्रतिक्रिया शीर्षलेख सेट करता है। यहां केवल 'POST' विधि की अनुमति देने के लिए उपयोग किया जाता है।
FileReader()	किसी फ़ाइल की सामग्री को अतुल्यकालिक रूप से पढ़ता है। फ़ाइल को बेस64 स्ट्रिंग में बदलने के लिए यहां उपयोग किया जाता है।
readAsDataURL()	फ़ाइल को बेस64 एन्कोडेड स्ट्रिंग के रूप में पढ़ने के लिए फ़ाइल रीडर की विधि।
onload()	FileReader के लिए इवेंट हैंडलर जो फ़ाइल रीडिंग ऑपरेशन पूरा होने पर ट्रिगर हो जाता है।
split()	एक स्ट्रिंग को सबस्ट्रिंग की एक सरणी में विभाजित करता है। यहां बेस64 सामग्री को डेटा यूआरएल उपसर्ग से अलग करने के लिए उपयोग किया जाता है।
JSON.stringify()	किसी जावास्क्रिप्ट ऑब्जेक्ट या मान को JSON स्ट्रिंग में कनवर्ट करता है।

रिएक्ट संपर्क फ़ॉर्म में ईमेल अनुलग्नक लागू करना

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

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

import type { NextApiRequest, NextApiResponse } from 'next';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

const send = async (req: NextApiRequest, res: NextApiResponse) => {
  const { method } = req;
  const { content, filename } = req.body;

  switch (method) {
    case 'POST': {
      try {
        const { data } = await resend.emails.send({
          from: 'onboarding@resend.dev',
          to: ['XXXXXXXXXX@gmail.com'],
          subject: 'Email with attachment',
          html: '<p>See attachment</p>',
          attachments: [{
            content,
            filename,
          }],
        });
        return res.status(200).send({ data: data?.id });
      } catch (error) {
        return res.status(500).json({ error: 'Internal Server Error' });
      }
    }
    default: {
      res.setHeader('Allow', ['POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
    }
  }
};

export default send;

import * as React from 'react';

const ContactForm: React.FC = () => {
  const [content, setContent] = React.useState<string | null>(null);
  const [filename, setFilename] = React.useState('');

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (content === null) {
      alert('Please select a file to upload');
      return;
    }
    const base64Content = content.split(',')[1];
    try {
      await fetch('/api/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: base64Content, filename }),
      });
      alert('Request sent');
    } catch (e) {
      alert('Something went wrong');
    }
  };

  const onAddFileAction = (e: React.ChangeEvent<HTMLInputElement>) => {
    const reader = new FileReader();
    const files = e.target.files;
    if (files && files.length > 0) {
      reader.onload = (r) => {
        if (r.target?.result) {
          setContent(r.target.result.toString());
          setFilename(files[0].name);
        }
      };
      reader.readAsDataURL(files[0]);
    }
  };

  return (
    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: 200 }}> 
      <input type="file" name="file" onChange={onAddFileAction} accept="image/*" /> 
      <input type="submit" value="Send Email" /> 
    </form> 
  );
};

export default ContactForm;

प्रतिक्रिया प्रपत्रों में फ़ाइल अपलोड को संभालना

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

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

1. उपयोग करने का उद्देश्य क्या है फ़ाइल अपलोड में?
2. एपीआई का उपयोग फ़ाइलों की सामग्री को अतुल्यकालिक रूप से पढ़ने और उन्हें HTTP अनुरोधों में ट्रांसमिशन के लिए बेस 64 स्ट्रिंग के रूप में एन्कोड करने के लिए किया जाता है।
3. मैं यह कैसे सुनिश्चित कर सकता हूं कि मेरी फ़ाइल अपलोड सुरक्षित हैं?
4. का उपयोग करके सुनिश्चित करें कि केवल विशिष्ट फ़ाइल प्रकार ही स्वीकार किए जाते हैं इनपुट फ़ील्ड में विशेषता. इसके अतिरिक्त, सर्वर-साइड पर फ़ाइल सामग्री को मान्य करें।
5. का क्या महत्व है में घटना ?
6. फ़ाइल रीडिंग ऑपरेशन पूरा होने पर ईवेंट ट्रिगर हो जाता है, जिससे आप फ़ाइल की सामग्री तक पहुंच सकते हैं और आगे की कार्रवाई कर सकते हैं।
7. मैं रिएक्ट में बड़ी फ़ाइलों को कैसे संभाल सकता हूँ?
8. बड़ी फ़ाइलों के लिए, ब्राउज़र मेमोरी सीमाओं से बचने और उपयोगकर्ता को प्रगति प्रतिक्रिया प्रदान करने के लिए खंडित फ़ाइल अपलोड लागू करने पर विचार करें।
9. मुझे उपयोग करने की आवश्यकता क्यों है? फ़ाइल डेटा कब भेजते हैं?
10. फ़ाइल डेटा वाले जावास्क्रिप्ट ऑब्जेक्ट को JSON स्ट्रिंग में परिवर्तित करता है, जो एपीआई कॉल में अनुरोध निकाय के लिए आवश्यक प्रारूप है।
11. ईमेल भेजते समय 500 (आंतरिक सर्वर त्रुटि) क्या दर्शाता है?
12. 500 त्रुटि आम तौर पर सर्वर-साइड समस्या को इंगित करती है, जैसे गलत एपीआई एंडपॉइंट कॉन्फ़िगरेशन या ईमेल भेजने वाली सेवा के भीतर समस्याएं।
13. मैं अपनी एपीआई कॉल में 500 त्रुटि को कैसे डीबग कर सकता हूं?
14. विस्तृत त्रुटि संदेशों के लिए सर्वर लॉग की जाँच करें और सुनिश्चित करें कि एपीआई एंडपॉइंट और अनुरोध पेलोड सही ढंग से कॉन्फ़िगर किए गए हैं।
15. की क्या भूमिका है बैकएंड स्क्रिप्ट में विधि खेलें?
16. विधि का उपयोग HTTP प्रतिक्रिया शीर्षलेख को सेट करने के लिए किया जाता है, जो अनुमत HTTP विधियों (उदाहरण के लिए, 'POST') को निर्दिष्ट करता है।
17. फ़ाइल अपलोड के दौरान मैं उपयोगकर्ता प्रतिक्रिया कैसे प्रदान कर सकता हूँ?
18. उपयोगकर्ताओं को अपलोड स्थिति और आने वाली किसी भी त्रुटि के बारे में सूचित करने के लिए अलर्ट संदेश, प्रगति बार या स्थिति संकेतक का उपयोग करें।
19. क्या मैं इस सेटअप के साथ एक साथ कई फ़ाइलें अपलोड कर सकता हूँ?
20. यह सेटअप एकल फ़ाइल अपलोड को संभालता है। एकाधिक फ़ाइलों के लिए, आपको फ़ाइल डेटा के सरणियों को संभालने और उन्हें एपीआई अनुरोध में भेजने के लिए कोड को संशोधित करने की आवश्यकता है।

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