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

إنشاء نموذج اتصال مع مرفقات الملفات

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

سيرشدك هذا الدليل خلال إعداد نموذج اتصال باستخدام React وResend، ومعالجة المشكلات الشائعة مثل التعامل مع مرفقات الملفات وتصحيح أخطاء الخادم. باتباع هذه الخطوات، ستتمكن من إرسال رسائل البريد الإلكتروني مع المرفقات بسلاسة.

يأمر	وصف
Resend.emails.send()	يرسل بريدًا إلكترونيًا يحتوي على معلمات محددة بما في ذلك من وإلى والموضوع وhtml والمرفقات.
setHeader()	يضبط رأس الاستجابة بمعلمات محددة. يُستخدم هنا للسماح بطريقة "POST" فقط.
FileReader()	يقرأ محتوى الملف بشكل غير متزامن. يستخدم هنا لتحويل الملف إلى سلسلة base64.
readAsDataURL()	طريقة FileReader لقراءة الملف كسلسلة مشفرة base64.
onload()	معالج الأحداث لـ FileReader الذي يتم تشغيله عند اكتمال عملية قراءة الملف.
split()	يقسم سلسلة إلى مجموعة من السلاسل الفرعية. يُستخدم هنا لفصل محتوى base64 عن بادئة عنوان URL للبيانات.
JSON.stringify()	يحول كائن JavaScript أو قيمة إلى سلسلة JSON.

تنفيذ مرفق البريد الإلكتروني في نموذج الاتصال React

يتم إنشاء البرنامج النصي للواجهة الخلفية باستخدام مسارات Next.js API ومكتبة إعادة الإرسال لإرسال رسائل البريد الإلكتروني مع المرفقات. الوظيفة الرئيسية، ، يستخدم لإرسال البريد الإلكتروني. تأخذ هذه الوظيفة معلمات مثل , , subject, ، و . ال تتضمن المعلمة محتوى الملف واسم الملف. يبدأ البرنامج النصي باستيراد الوحدات الضرورية وتهيئة مثيل إعادة الإرسال باستخدام مفتاح API المخزن في متغيرات البيئة. تعمل الوظيفة فقط POST الطلبات وإرسال البريد الإلكتروني وإعادة معرف البريد الإلكتروني عند النجاح. إذا لم تكن الطريقة ، يقوم بتعيين رأس الاستجابة للسماح فقط يطلب ويعيد حالة 405.

على الواجهة الأمامية، يتم إنشاء مكون React للتعامل مع نموذج الاتصال. يحافظ المكون على حالة محتوى الملف واسم الملف باستخدام React خطاف. عند تحديد ملف، أ يقرأ الكائن محتوى الملف كسلسلة مشفرة Base64. يتم تخزين محتوى الملف واسمه في حالة المكون. عند إرسال النموذج، ترسل وظيفة غير متزامنة طلب إلى واجهة برمجة التطبيقات الخلفية مع محتوى الملف المشفر Base64 واسم الملف. تم تعيين رؤوس الطلب على 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;

التعامل مع تحميلات الملفات في نماذج React

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

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

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

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