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

Tworzenie formularza kontaktowego z załącznikami plików

Utworzenie formularza kontaktowego w React, który umożliwia użytkownikom wysyłanie e-maili z załącznikami, może być wyzwaniem, szczególnie w przypadku integracji usług innych firm, takich jak Resend. Aby uniknąć błędów, kluczowe znaczenie ma zapewnienie prawidłowej konfiguracji i obsługi przesyłania plików.

Ten przewodnik przeprowadzi Cię przez proces konfigurowania formularza kontaktowego za pomocą funkcji Reaguj i wyślij ponownie, omawiając typowe problemy, takie jak obsługa załączników plików i debugowanie błędów serwera. Wykonując poniższe kroki, będziesz mógł bezproblemowo wysyłać e-maile z załącznikami.

Komenda	Opis
Resend.emails.send()	Wysyła wiadomość e-mail z określonymi parametrami, takimi jak od, do, temat, kod HTML i załączniki.
setHeader()	Ustawia nagłówek odpowiedzi z określonymi parametrami. Używane tutaj, aby zezwalać tylko na metodę „POST”.
FileReader()	Odczytuje zawartość pliku asynchronicznie. Używany tutaj do konwersji pliku na ciąg znaków base64.
readAsDataURL()	Metoda FileReadera do odczytania pliku jako ciągu zakodowanego w standardzie base64.
onload()	Obsługa zdarzeń dla FileReadera, która jest wyzwalana po zakończeniu operacji odczytu pliku.
split()	Dzieli ciąg na tablicę podciągów. Używany tutaj do oddzielenia treści base64 od prefiksu adresu URL danych.
JSON.stringify()	Konwertuje obiekt lub wartość JavaScript na ciąg JSON.

Implementacja załącznika e-mail w formularzu kontaktowym React

Skrypt backendowy jest tworzony przy użyciu tras API Next.js i biblioteki Resend w celu wysyłania wiadomości e-mail z załącznikami. Kluczową funkcją, , służy do wysyłania wiadomości e-mail. Funkcja ta pobiera parametry takie jak , , subject, , I . The Parametr zawiera zawartość i nazwę pliku. Skrypt rozpoczyna się od zaimportowania niezbędnych modułów i inicjuje instancję Resend przy użyciu klucza API przechowywanego w zmiennych środowiskowych. Funkcja obsługuje tylko POST żądań, wysyłając wiadomość e-mail i po pomyślnym zwróceniu identyfikatora e-mail. Jeśli nie ma metody , ustawia nagłówek odpowiedzi na zezwolenie tylko żąda i zwraca status 405.

Na froncie tworzony jest komponent React obsługujący formularz kontaktowy. Komponent utrzymuje stan zawartości i nazwy pliku przy użyciu Reacta hak. Po wybraniu pliku a obiekt odczytuje zawartość pliku jako ciąg zakodowany w formacie base64. Zawartość i nazwa pliku są przechowywane w stanie komponentu. Po przesłaniu formularza funkcja asynchroniczna wysyła plik a żądanie do interfejsu API zaplecza z zawartością i nazwą pliku zakodowaną w standardzie Base64. Nagłówki żądań są ustawione na application/json a treść żądania zawiera dane pliku. Jeśli wiadomość e-mail zostanie pomyślnie wysłana, wyświetlony zostanie alert; w przeciwnym razie zostanie wyświetlony alert o błędzie.

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;

Obsługa przesyłania plików w formularzach React

Kiedy mamy do czynienia z przesyłaniem plików w formularzach React, istotne jest zapewnienie prawidłowej obsługi odczytu plików i kodowania danych. Używając API w JavaScript pozwala nam na asynchroniczne odczytywanie zawartości plików, konwertując je na ciąg znaków zakodowany w formacie base64, który jest niezbędny do przesyłania danych plików przez HTTP. Ten zakodowany ciąg można łatwo przesłać jako część treści żądania podczas wykonywania wywołań API.

Zapewnienie prawidłowego odczytu i zakodowania danych pliku ma kluczowe znaczenie, aby uniknąć problemów, takich jak uszkodzenie danych lub niekompletne przesyłanie. Ponadto odpowiednia obsługa różnych typów i rozmiarów plików może zapobiec nieoczekiwanym błędom. Właściwa obsługa błędów i opinie użytkowników, takie jak alerty, są również ważne, aby przeprowadzić użytkownika przez proces przesyłania pliku i poinformować go, jeśli coś pójdzie nie tak.

1. Jaki jest cel stosowania w przesyłaniu plików?
2. The 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 atrybut w polu wejściowym. Dodatkowo sprawdź zawartość pliku po stronie serwera.
5. Jakie znaczenie ma wydarzenie w ?
6. The 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ć podczas wysyłania danych pliku?
10. 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 metoda odtwarzania w skrypcie zaplecza?
16. The 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.

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.