Руководство по отправке электронных писем с вложениями в React

Создание контактной формы с вложенными файлами

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

В этом руководстве вы узнаете, как настроить контактную форму с помощью React и Resend, решая распространенные проблемы, такие как обработка вложений файлов и отладка ошибок сервера. Выполнив эти шаги, вы сможете беспрепятственно отправлять электронные письма с вложениями.

Команда	Описание
Resend.emails.send()	Отправляет электронное письмо с указанными параметрами, включая «от», «кому», «тема», «html» и вложения.
setHeader()	Устанавливает заголовок ответа с указанными параметрами. Используется здесь, чтобы разрешить только метод POST.
FileReader()	Считывает содержимое файла асинхронно. Используется здесь для преобразования файла в строку base64.
readAsDataURL()	Метод FileReader для чтения файла как строки в кодировке Base64.
onload()	Обработчик событий для FileReader, который срабатывает после завершения операции чтения файла.
split()	Разбивает строку на массив подстрок. Используется здесь для отделения содержимого base64 от префикса URL-адреса данных.
JSON.stringify()	Преобразует объект или значение JavaScript в строку JSON.

Реализация вложения электронной почты в контактной форме React

Серверный скрипт создается с использованием маршрутов API Next.js и библиотеки повторной отправки для отправки электронных писем с вложениями. Ключевая функция, , используется для отправки электронной почты. Эта функция принимает такие параметры, как , , subject, , и . Параметр включает содержимое и имя файла. Скрипт начинается с импорта необходимых модулей и инициализирует экземпляр Resend, используя ключ API, хранящийся в переменных среды. Функция обрабатывает только POST запросы, отправка электронного письма и возврат идентификатора электронной почты в случае успеха. Если метод не , он устанавливает заголовок ответа, чтобы разрешить только запрашивает и возвращает статус 405.

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

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