Guide till att skicka e-postmeddelanden med bilagor i React

Backend-skript för att skicka e-post med bilaga med hjälp av Skicka igen

Backend-skript i Next.js med Återsänd

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-komponent för kontaktformulär med filbilaga

Frontend-komponent i 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;

Vanliga frågor och svar om att skicka e-postmeddelanden med bilagor i React

1. Vad är syftet med att använda FileReader i filuppladdningar?
2. De FileReader API används för att läsa innehållet i filer asynkront och koda dem som en base64-sträng för överföring i HTTP-förfrågningar.
3. Hur kan jag säkerställa att mina filuppladdningar är säkra?
4. Se till att endast specifika filtyper accepteras genom att använda accept attribut i inmatningsfältet. Validera dessutom filinnehållet på serversidan.
5. Vad är betydelsen av onload händelse i FileReader?
6. De onload händelsen utlöses när filläsningen är klar, vilket gör att du kan komma åt filens innehåll och utföra ytterligare åtgärder.
7. Hur kan jag hantera stora filer i React?
8. För stora filer, överväg att implementera filuppladdningar i bitar för att undvika begränsningar i webbläsarens minne och för att ge användaren feedback om framsteg.
9. Varför behöver jag använda JSON.stringify när du skickar fildata?
10. JSON.stringify konverterar JavaScript-objektet som innehåller fildata till en JSON-sträng, vilket är det format som krävs för förfrågningskroppen i API-anrop.
11. Vad indikerar ett 500 (internt serverfel) när du skickar e-post?
12. Ett 500-fel indikerar vanligtvis ett problem på serversidan, till exempel felaktig API-slutpunktskonfiguration eller problem inom e-postsändningstjänsten.
13. Hur kan jag felsöka ett 500-fel i mina API-anrop?
14. Kontrollera serverloggarna för detaljerade felmeddelanden och se till att API-slutpunkten och förfrågans nyttolast är korrekt konfigurerade.
15. Vilken roll har res.setHeader metod spela i backend-skriptet?
16. De res.setHeader metod används för att ställa in HTTP-svarshuvudet, och specificerar de tillåtna HTTP-metoderna (t.ex. 'POST').
17. Hur kan jag ge användarfeedback under filuppladdningar?
18. Använd varningsmeddelanden, förloppsindikatorer eller statusindikatorer för att informera användarna om uppladdningsstatus och eventuella fel.
19. Kan jag ladda upp flera filer samtidigt med den här inställningen?
20. Denna inställning hanterar enstaka filuppladdningar. För flera filer måste du ändra koden för att hantera uppsättningar av fildata och skicka dem i API-begäran.

Slutliga tankar om React-kontaktformulär

Att implementera filbilagor i ett React-kontaktformulär med Resend involverar både front-end- och back-end-konfigurationer. Front-end hanterar filval, läsning och kodning till base64, medan back-end hanterar att skicka e-postmeddelandet med bilagan med hjälp av Resends API. Korrekt felhantering och användarfeedback är avgörande för en sömlös användarupplevelse. Att följa bästa praxis och se till att alla konfigurationer är korrekta kan hjälpa till att undvika vanliga fallgropar som serverfel.