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

Backend-Skript zum Senden von E-Mails mit Anhang mithilfe von „Erneut senden“.

Backend-Skript in Next.js mit Resend

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;

Frontend-Komponente für Kontaktformular mit Dateianhang

Frontend-Komponente in 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;

Häufige Fragen und Antworten zum Senden von E-Mails mit Anhängen in React

1. Was ist der Zweck der Verwendung? FileReader in Datei-Uploads?
2. Der FileReader 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 accept Attribut in das Eingabefeld ein. Überprüfen Sie außerdem den Dateiinhalt serverseitig.
5. Welche Bedeutung hat das onload Veranstaltung in FileReader?
6. Der onload 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 JSON.stringify beim Senden von Dateidaten?
10. JSON.stringify 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 res.setHeader Methode spielen im Backend-Skript?
16. Der res.setHeader 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.

Abschließende Gedanken zu React-Kontaktformularen

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.