Посібник із надсилання електронних листів із вкладеннями в 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. The FileReader API використовується для асинхронного читання вмісту файлів і кодування його як рядок base64 для передачі в запитах HTTP.
3. Як я можу переконатися, що мої завантажені файли безпечні?
4. Переконайтеся, що приймаються лише певні типи файлів за допомогою accept атрибут у полі введення. Крім того, перевірте вміст файлу на стороні сервера.
5. Яке значення має onload подія в FileReader?
6. The 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 метод відтворення у серверному сценарії?
16. The res.setHeader метод використовується для встановлення заголовка відповіді HTTP, вказуючи дозволені методи HTTP (наприклад, «POST»).
17. Як я можу надати відгук користувачам під час завантаження файлів?
18. Використовуйте сповіщення, індикатори виконання або індикатори стану, щоб інформувати користувачів про стан завантаження та будь-які виявлені помилки.
19. Чи можу я завантажити кілька файлів одночасно за допомогою цього налаштування?
20. Це налаштування обробляє завантаження одного файлу. Для кількох файлів вам потрібно змінити код, щоб обробляти масиви даних файлів і надсилати їх у запиті API.

Останні думки щодо контактних форм React

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