Посібник із надсилання електронних листів із вкладеннями в React

Lucas Simon
пʼятниця, 17 травня 2024 р. о 01:01:16
React.js and Next.js

Створення контактної форми з вкладеними файлами

Створення контактної форми в 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 і бібліотеки Resend для надсилання електронних листів із вкладеннями. Ключова функція, , використовується для надсилання електронної пошти. Ця функція приймає такі параметри, як , , subject, , і . The Параметр включає вміст файлу та ім'я файлу. Сценарій починається з імпортування необхідних модулів та ініціалізації екземпляра Resend за допомогою ключа API, який зберігається у змінних середовища. Функція обробляє тільки POST запити, надсилання електронного листа та повернення ідентифікатора електронної пошти в разі успіху. Якщо методу немає , він встановлює лише дозволений заголовок відповіді запитує та повертає статус 405.

У інтерфейсі створюється компонент React для обробки контактної форми. Компонент підтримує стан вмісту та імені файлу за допомогою React гачок. Коли файл вибрано, a об’єкт читає вміст файлу як рядок у кодуванні base64. Вміст і назва файлу зберігаються в стані компонента. Після надсилання форми асинхронна функція надсилає a запит до серверного API із вмістом файлу та назвою файлу в кодуванні base64. Для заголовків запиту встановлено значення application/json а тіло запиту містить дані файлу. Якщо електронний лист надіслано успішно, з’явиться сповіщення; інакше відображається сповіщення про помилку.

Сценарій серверної частини для надсилання електронної пошти з вкладенням за допомогою повторного надсилання

Бекенд-сценарій у 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 Forms

Маючи справу із завантаженням файлів у формах React, важливо забезпечити правильну обробку читання файлів і кодування даних. Використовуючи API у JavaScript дозволяє асинхронно читати вміст файлів, перетворюючи їх на рядок у кодуванні base64, необхідний для надсилання даних файлу через HTTP. Цей закодований рядок можна легко передати як частину тіла запиту під час викликів API.

Забезпечення правильного читання та кодування даних файлу має вирішальне значення, щоб уникнути таких проблем, як пошкодження даних або неповне завантаження. Крім того, належна обробка різних типів і розмірів файлів може запобігти неочікуваним помилкам. Правильна обробка помилок і відгуки користувачів, наприклад сповіщення, також важливі, щоб направляти користувача через процес завантаження файлу та інформувати його, якщо щось піде не так.

  1. Яка мета використання у завантаженні файлів?
  2. The API використовується для асинхронного читання вмісту файлів і кодування його як рядок base64 для передачі в запитах HTTP.
  3. Як я можу переконатися, що мої завантажені файли безпечні?
  4. Переконайтеся, що приймаються лише певні типи файлів за допомогою атрибут у полі введення. Крім того, перевірте вміст файлу на стороні сервера.
  5. Яке значення має подія в ?
  6. The подія запускається, коли операція читання файлу завершена, дозволяючи вам отримати доступ до вмісту файлу та виконати подальші дії.
  7. Як я можу обробляти великі файли в React?
  8. Для великих файлів подумайте про впровадження фрагментованих завантажень файлів, щоб уникнути обмежень пам’яті браузера та надати користувачеві зворотній зв’язок.
  9. Чому мені потрібно використовувати під час надсилання даних файлу?
  10. перетворює об’єкт JavaScript, що містить дані файлу, у рядок JSON, який є необхідним форматом для тіла запиту у викликах API.
  11. Що означає 500 (внутрішня помилка сервера) під час надсилання електронних листів?
  12. Помилка 500 зазвичай вказує на проблему на стороні сервера, наприклад неправильну конфігурацію кінцевої точки API або проблеми в службі надсилання електронної пошти.
  13. Як я можу налагодити помилку 500 у викликах API?
  14. Перевірте журнали сервера на наявність детальних повідомлень про помилки та переконайтеся, що кінцеву точку API та корисне навантаження запиту налаштовано правильно.
  15. Яку роль відіграє метод відтворення у серверному сценарії?
  16. The метод використовується для встановлення заголовка відповіді HTTP, вказуючи дозволені методи HTTP (наприклад, «POST»).
  17. Як я можу надати відгук користувачам під час завантаження файлів?
  18. Використовуйте сповіщення, індикатори виконання або індикатори стану, щоб інформувати користувачів про стан завантаження та будь-які виявлені помилки.
  19. Чи можу я завантажити кілька файлів одночасно за допомогою цього налаштування?
  20. Це налаштування обробляє завантаження одного файлу. Для кількох файлів вам потрібно змінити код, щоб обробляти масиви даних файлів і надсилати їх у запиті API.

Реалізація вкладених файлів у формі контакту React за допомогою Resend передбачає конфігурації як зовнішнього, так і внутрішнього. Інтерфейс обробляє вибір, читання та кодування файлів у base64, тоді як сервер керує надсиланням електронного листа з вкладенням за допомогою API Resend. Правильна обробка помилок і механізми зворотного зв’язку з користувачем є вирішальними для безперебійної взаємодії з користувачем. Дотримання найкращих практик і забезпечення правильності всіх конфігурацій може допомогти уникнути поширених пасток, як-от помилок сервера.