دليل إرسال رسائل البريد الإلكتروني مع المرفقات في React

البرنامج النصي الخلفي لإرسال البريد الإلكتروني مع المرفقات باستخدام إعادة الإرسال

البرنامج النصي للواجهة الخلفية في 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;

أسئلة وأجوبة شائعة حول إرسال رسائل البريد الإلكتروني مع المرفقات في React

1. ما هو الغرض من استخدام FileReader في تحميل الملفات؟
2. ال FileReader يتم استخدام واجهة برمجة التطبيقات (API) لقراءة محتويات الملفات بشكل غير متزامن وترميزها كسلسلة Base64 لنقلها في طلبات HTTP.
3. كيف يمكنني التأكد من أن تحميلات الملفات الخاصة بي آمنة؟
4. تأكد من قبول أنواع ملفات محددة فقط باستخدام ملف accept السمة في حقل الإدخال. بالإضافة إلى ذلك، التحقق من صحة محتوى الملف على جانب الخادم.
5. ما هي أهمية onload حدث في FileReader؟
6. ال onload يتم تشغيل الحدث عند اكتمال عملية قراءة الملف، مما يسمح لك بالوصول إلى محتويات الملف وتنفيذ المزيد من الإجراءات.
7. كيف يمكنني التعامل مع الملفات الكبيرة في React؟
8. بالنسبة للملفات الكبيرة، فكر في تنفيذ عمليات تحميل الملفات المقسمة لتجنب قيود ذاكرة المتصفح ولتقديم تعليقات حول التقدم للمستخدم.
9. لماذا أحتاج للاستخدام JSON.stringify عند إرسال بيانات الملف؟
10. JSON.stringify يحول كائن JavaScript الذي يحتوي على بيانات الملف إلى سلسلة JSON، وهو التنسيق المطلوب لنص الطلب في استدعاءات API.
11. ماذا يشير الرقم 500 (خطأ داخلي في الخادم) عند إرسال رسائل البريد الإلكتروني؟
12. يشير الخطأ 500 عادةً إلى مشكلة من جانب الخادم، مثل تكوين نقطة نهاية واجهة برمجة التطبيقات غير الصحيحة أو مشكلات داخل خدمة إرسال البريد الإلكتروني.
13. كيف يمكنني تصحيح الخطأ 500 في مكالمات API الخاصة بي؟
14. تحقق من سجلات الخادم بحثًا عن رسائل الخطأ التفصيلية وتأكد من تكوين نقطة نهاية API وحمولة الطلب بشكل صحيح.
15. ما الدور الذي يقوم به res.setHeader طريقة اللعب في البرنامج النصي الخلفية؟
16. ال res.setHeader يتم استخدام الطريقة لتعيين رأس استجابة HTTP، وتحديد طرق HTTP المسموح بها (على سبيل المثال، "POST").
17. كيف يمكنني تقديم تعليقات المستخدمين أثناء تحميل الملفات؟
18. استخدم رسائل التنبيه أو أشرطة التقدم أو مؤشرات الحالة لإعلام المستخدمين بحالة التحميل وأي أخطاء تمت مواجهتها.
19. هل يمكنني تحميل ملفات متعددة مرة واحدة باستخدام هذا الإعداد؟
20. يعالج هذا الإعداد عمليات تحميل الملفات الفردية. بالنسبة للملفات المتعددة، تحتاج إلى تعديل التعليمات البرمجية للتعامل مع صفائف بيانات الملف وإرسالها في طلب API.

الأفكار النهائية حول نماذج الاتصال التفاعلية

يتضمن تنفيذ مرفقات الملفات في نموذج اتصال React باستخدام Resend تكوينات الواجهة الأمامية والخلفية. تتعامل الواجهة الأمامية مع اختيار الملف وقراءته وترميزه إلى base64، بينما تدير الواجهة الخلفية إرسال البريد الإلكتروني مع المرفق باستخدام Resend's API. تعد المعالجة الصحيحة للأخطاء وآليات تعليقات المستخدم أمرًا بالغ الأهمية للحصول على تجربة مستخدم سلسة. إن اتباع أفضل الممارسات والتأكد من صحة جميع التكوينات يمكن أن يساعد في تجنب المخاطر الشائعة مثل أخطاء الخادم.