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

पुन: भेजें का उपयोग करके अनुलग्नक के साथ ईमेल भेजने के लिए बैकएंड स्क्रिप्ट

Next.js में बैकएंड स्क्रिप्ट पुनः भेजें के साथ

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;

फ़ाइल अनुलग्नक के साथ संपर्क फ़ॉर्म के लिए फ्रंटएंड घटक

React.js में फ्रंटएंड घटक

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;

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

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

प्रतिक्रिया संपर्क फ़ॉर्म पर अंतिम विचार

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