Przewodnik po wysyłaniu wiadomości e-mail z załącznikami w React

Skrypt zaplecza umożliwiający wysyłanie wiadomości e-mail z załącznikiem za pomocą funkcji ponownego wysyłania

Skrypt backendowy w Next.js z możliwością ponownego wysłania

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;

Komponent frontendowy dla formularza kontaktowego z załącznikiem pliku

Komponent frontendowy w 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;

Często zadawane pytania i odpowiedzi dotyczące wysyłania wiadomości e-mail z załącznikami w React

1. Jaki jest cel stosowania FileReader w przesyłaniu plików?
2. The FileReader API służy do asynchronicznego odczytu zawartości plików i kodowania ich jako ciągu Base64 w celu transmisji w żądaniach HTTP.
3. Jak mogę zapewnić bezpieczeństwo przesyłanych plików?
4. Upewnij się, że akceptowane są tylko określone typy plików, używając opcji accept atrybut w polu wejściowym. Dodatkowo sprawdź zawartość pliku po stronie serwera.
5. Jakie znaczenie ma onload wydarzenie w FileReader?
6. The onload zdarzenie wywoływane jest po zakończeniu operacji odczytu pliku, umożliwiając dostęp do zawartości pliku i wykonanie dalszych działań.
7. Jak mogę obsługiwać duże pliki w React?
8. W przypadku dużych plików rozważ wdrożenie przesyłania plików fragmentarycznych, aby uniknąć ograniczeń pamięci przeglądarki i zapewnić użytkownikowi informację o postępie.
9. Dlaczego muszę używać JSON.stringify podczas wysyłania danych pliku?
10. JSON.stringify konwertuje obiekt JavaScript zawierający dane pliku na ciąg JSON, który jest wymaganym formatem treści żądania w wywołaniach API.
11. Co oznacza komunikat 500 (wewnętrzny błąd serwera) podczas wysyłania wiadomości e-mail?
12. Błąd 500 zazwyczaj wskazuje na problem po stronie serwera, taki jak nieprawidłowa konfiguracja punktu końcowego interfejsu API lub problemy z usługą wysyłania wiadomości e-mail.
13. Jak mogę debugować błąd 500 w wywołaniach API?
14. Sprawdź dzienniki serwera pod kątem szczegółowych komunikatów o błędach i upewnij się, że punkt końcowy interfejsu API i ładunek żądania są poprawnie skonfigurowane.
15. Jaką rolę pełni res.setHeader metoda odtwarzania w skrypcie zaplecza?
16. The res.setHeader metoda służy do ustawienia nagłówka odpowiedzi HTTP, określając dozwolone metody HTTP (np. „POST”).
17. Jak mogę przekazać opinię użytkownikom podczas przesyłania plików?
18. Użyj komunikatów alertów, pasków postępu lub wskaźników stanu, aby poinformować użytkowników o stanie przesyłania i wszelkich napotkanych błędach.
19. Czy przy tej konfiguracji mogę przesłać wiele plików jednocześnie?
20. Ta konfiguracja obsługuje przesyłanie pojedynczych plików. W przypadku wielu plików należy zmodyfikować kod, aby obsługiwał tablice danych plików i wysyłał je w żądaniu API.

Końcowe przemyślenia na temat formularzy kontaktowych React

Implementacja załączników plików w formularzu kontaktowym React za pomocą funkcji Resend obejmuje zarówno konfiguracje front-endowe, jak i back-endowe. Frontend obsługuje wybieranie, odczytywanie i kodowanie plików do base64, natomiast backend zarządza wysyłaniem wiadomości e-mail z załącznikiem za pomocą interfejsu API Resend. Właściwa obsługa błędów i mechanizmy przesyłania opinii użytkowników mają kluczowe znaczenie dla zapewnienia bezproblemowej obsługi. Przestrzeganie najlepszych praktyk i upewnianie się, że wszystkie konfiguracje są prawidłowe, może pomóc uniknąć typowych pułapek, takich jak błędy serwera.