Anleitung zum Senden von E-Mails mit Anhängen in React

Erstellen eines Kontaktformulars mit Dateianhängen

Das Erstellen eines Kontaktformulars in React, das es Benutzern ermöglicht, E-Mails mit Dateianhängen zu senden, kann eine Herausforderung sein, insbesondere bei der Integration von Drittanbieterdiensten wie Resend. Um Fehler zu vermeiden, ist die Sicherstellung der korrekten Einrichtung und Handhabung von Datei-Uploads von entscheidender Bedeutung.

Dieser Leitfaden führt Sie durch die Einrichtung eines Kontaktformulars mit React und Resend und geht dabei auf häufige Probleme wie den Umgang mit Dateianhängen und das Debuggen von Serverfehlern ein. Wenn Sie diese Schritte befolgen, können Sie E-Mails mit Anhängen nahtlos versenden.

Befehl	Beschreibung
Resend.emails.send()	Sendet eine E-Mail mit angegebenen Parametern, einschließlich von, an, Betreff, HTML und Anhängen.
setHeader()	Legt den Antwortheader mit angegebenen Parametern fest. Wird hier verwendet, um nur die „POST“-Methode zuzulassen.
FileReader()	Liest den Inhalt einer Datei asynchron. Wird hier verwendet, um die Datei in einen Base64-String zu konvertieren.
readAsDataURL()	Methode von FileReader zum Lesen der Datei als Base64-codierte Zeichenfolge.
onload()	Ereignishandler für FileReader, der ausgelöst wird, wenn der Dateilesevorgang abgeschlossen ist.
split()	Teilt eine Zeichenfolge in ein Array von Teilzeichenfolgen auf. Wird hier verwendet, um den Base64-Inhalt vom Daten-URL-Präfix zu trennen.
JSON.stringify()	Konvertiert ein JavaScript-Objekt oder -Wert in eine JSON-Zeichenfolge.

Implementieren eines E-Mail-Anhangs im React-Kontaktformular

Das Backend-Skript wird mithilfe von Next.js-API-Routen und der Resend-Bibliothek erstellt, um E-Mails mit Anhängen zu senden. Die Schlüsselfunktion, , wird zum Versenden der E-Mail verwendet. Diese Funktion akzeptiert Parameter wie , , subject, , Und . Der Der Parameter enthält den Dateiinhalt und den Dateinamen. Das Skript beginnt mit dem Importieren der erforderlichen Module und initialisiert die Resend-Instanz mithilfe eines in Umgebungsvariablen gespeicherten API-Schlüssels. Die Funktion behandelt nur POST Anfragen, Senden der E-Mail und Zurücksenden der E-Mail-ID bei Erfolg. Wenn die Methode nicht ist , wird der Antwortheader so eingestellt, dass er nur zulässig ist fordert den Status 405 an und gibt ihn zurück.

Im Frontend wird eine React-Komponente zur Handhabung des Kontaktformulars erstellt. Die Komponente verwaltet den Status für den Dateiinhalt und den Dateinamen mithilfe von React Haken. Wenn eine Datei ausgewählt wird, a Das Objekt liest den Dateiinhalt als Base64-codierte Zeichenfolge. Der Inhalt und der Name der Datei werden im Status der Komponente gespeichert. Bei der Formularübermittlung sendet eine asynchrone Funktion eine Anfrage an die Backend-API mit dem Base64-codierten Dateiinhalt und Dateinamen. Die Anforderungsheader sind auf gesetzt application/json und der Anforderungstext enthält die Dateidaten. Wenn die E-Mail erfolgreich gesendet wurde, wird eine Warnung angezeigt; andernfalls wird eine Fehlermeldung angezeigt.

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;

Umgang mit Datei-Uploads in React Forms

Beim Hochladen von Dateien in React-Formularen ist es wichtig, die korrekte Handhabung des Dateilesens und der Datenkodierung sicherzustellen. Verwendung der Die API in JavaScript ermöglicht es uns, den Inhalt von Dateien asynchron zu lesen und sie in eine Base64-codierte Zeichenfolge umzuwandeln, die zum Senden von Dateidaten über HTTP erforderlich ist. Diese codierte Zeichenfolge kann bei API-Aufrufen problemlos als Teil des Anforderungstexts übertragen werden.

Es ist wichtig sicherzustellen, dass die Dateidaten korrekt gelesen und codiert werden, um Probleme wie Datenbeschädigung oder unvollständige Uploads zu vermeiden. Darüber hinaus können durch den richtigen Umgang mit verschiedenen Dateitypen und -größen unerwartete Fehler verhindert werden. Eine ordnungsgemäße Fehlerbehandlung und Benutzerfeedback, z. B. Warnungen, sind ebenfalls wichtig, um den Benutzer durch den Datei-Upload-Prozess zu führen und ihn zu informieren, wenn etwas schief geht.

1. Was ist der Zweck der Verwendung? in Datei-Uploads?
2. Der Die API wird verwendet, um den Inhalt von Dateien asynchron zu lesen und ihn als Base64-String für die Übertragung in HTTP-Anfragen zu kodieren.
3. Wie kann ich sicherstellen, dass meine Datei-Uploads sicher sind?
4. Stellen Sie sicher, dass nur bestimmte Dateitypen akzeptiert werden, indem Sie verwenden Attribut in das Eingabefeld ein. Überprüfen Sie außerdem den Dateiinhalt serverseitig.
5. Welche Bedeutung hat das Veranstaltung in ?
6. Der Das Ereignis wird ausgelöst, wenn der Dateilesevorgang abgeschlossen ist, sodass Sie auf den Inhalt der Datei zugreifen und weitere Aktionen ausführen können.
7. Wie kann ich große Dateien in React verarbeiten?
8. Erwägen Sie bei großen Dateien die Implementierung geblockter Datei-Uploads, um Einschränkungen des Browserspeichers zu vermeiden und dem Benutzer Fortschrittsrückmeldung zu geben.
9. Warum muss ich verwenden beim Senden von Dateidaten?
10. Konvertiert das JavaScript-Objekt, das die Dateidaten enthält, in einen JSON-String, der das erforderliche Format für den Anforderungstext in API-Aufrufen darstellt.
11. Was bedeutet ein 500 (Internal Server Error) beim Versenden von E-Mails?
12. Ein 500-Fehler weist normalerweise auf ein serverseitiges Problem hin, z. B. eine falsche API-Endpunktkonfiguration oder Probleme innerhalb des E-Mail-Versanddienstes.
13. Wie kann ich einen 500-Fehler in meinen API-Aufrufen debuggen?
14. Überprüfen Sie die Serverprotokolle auf detaillierte Fehlermeldungen und stellen Sie sicher, dass der API-Endpunkt und die Anforderungsnutzlast korrekt konfiguriert sind.
15. Welche Rolle spielt die Methode spielen im Backend-Skript?
16. Der Die Methode wird verwendet, um den HTTP-Antwortheader festzulegen und die zulässigen HTTP-Methoden anzugeben (z. B. „POST“).
17. Wie kann ich beim Hochladen von Dateien Benutzerfeedback geben?
18. Verwenden Sie Warnmeldungen, Fortschrittsbalken oder Statusanzeigen, um Benutzer über den Upload-Status und etwaige aufgetretene Fehler zu informieren.
19. Kann ich mit diesem Setup mehrere Dateien gleichzeitig hochladen?
20. Dieses Setup verarbeitet das Hochladen einzelner Dateien. Bei mehreren Dateien müssen Sie den Code ändern, um Arrays von Dateidaten zu verarbeiten und diese in der API-Anfrage zu senden.

Die Implementierung von Dateianhängen in einem React-Kontaktformular mithilfe von Resend erfordert sowohl Front-End- als auch Back-End-Konfigurationen. Das Front-End übernimmt die Dateiauswahl, das Lesen und die Codierung in Base64, während das Back-End das Senden der E-Mail mit dem Anhang mithilfe der Resend-API verwaltet. Eine ordnungsgemäße Fehlerbehandlung und Benutzer-Feedback-Mechanismen sind für ein nahtloses Benutzererlebnis von entscheidender Bedeutung. Wenn Sie Best Practices befolgen und sicherstellen, dass alle Konfigurationen korrekt sind, können Sie häufige Fallstricke wie Serverfehler vermeiden.