Руководство по отправке электронных писем с вложениями в 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 обычно указывает на проблему на стороне сервера, например неправильную конфигурацию конечной точки API или проблемы в службе отправки электронной почты.
13. Как я могу отладить ошибку 500 в вызовах API?
14. Проверьте журналы сервера на наличие подробных сообщений об ошибках и убедитесь, что конечная точка API и полезные данные запроса настроены правильно.
15. Какую роль играет res.setHeader метод play в бэкэнд-скрипте?
16. res.setHeader Метод используется для установки заголовка ответа HTTP с указанием разрешенных методов HTTP (например, «POST»).
17. Как я могу предоставить обратную связь пользователю во время загрузки файлов?
18. Используйте предупреждающие сообщения, индикаторы выполнения или индикаторы состояния, чтобы информировать пользователей о статусе загрузки и любых обнаруженных ошибках.
19. Могу ли я загрузить несколько файлов одновременно с помощью этой настройки?
20. Эта настройка обрабатывает загрузку отдельных файлов. Для нескольких файлов вам необходимо изменить код для обработки массивов данных файлов и отправки их в запросе API.

Заключительные мысли о контактных формах React

Реализация вложений файлов в контактной форме React с помощью Resend включает в себя как внешние, так и внутренние конфигурации. Интерфейсная часть обрабатывает выбор, чтение и кодирование файлов в base64, а внутренняя часть управляет отправкой электронного письма с вложением с помощью API Resend. Правильная обработка ошибок и механизмы обратной связи с пользователем имеют решающее значение для бесперебойной работы пользователей. Следование рекомендациям и обеспечение правильности всех конфигураций поможет избежать распространенных ошибок, таких как ошибки сервера.