Guide till att skicka e-postmeddelanden med bilagor i React

Skapa ett kontaktformulär med filbilagor

Att skapa ett kontaktformulär i React som tillåter användare att skicka e-postmeddelanden med filbilagor kan vara utmanande, särskilt när man integrerar tredjepartstjänster som Resend. Att säkerställa korrekt installation och hantering av filuppladdningar är avgörande för att undvika fel.

Den här guiden leder dig genom att skapa ett kontaktformulär med hjälp av Reagera och skicka om, och tar upp vanliga problem som hantering av filbilagor och felsökning av serverfel. Genom att följa dessa steg kommer du att kunna skicka e-postmeddelanden med bilagor sömlöst.

Kommando	Beskrivning
Resend.emails.send()	Skickar ett e-postmeddelande med specificerade parametrar inklusive från, till, ämne, html och bilagor.
setHeader()	Ställer in svarshuvudet med angivna parametrar. Används här för att endast tillåta 'POST'-metoden.
FileReader()	Läser innehållet i en fil asynkront. Används här för att konvertera filen till en base64-sträng.
readAsDataURL()	Metod för FileReader för att läsa filen som en base64-kodad sträng.
onload()	Händelsehanterare för FileReader som utlöses när filläsningen är klar.
split()	Delar upp en sträng i en array av delsträngar. Används här för att separera base64-innehållet från data-URL-prefixet.
JSON.stringify()	Konverterar ett JavaScript-objekt eller ett JavaScript-värde till en JSON-sträng.

Implementera e-postbilaga i Reacts kontaktformulär

Backend-skriptet skapas med hjälp av Next.js API-rutter och Resend-biblioteket för att skicka e-postmeddelanden med bilagor. Nyckelfunktionen, , används för att skicka e-postmeddelandet. Denna funktion tar parametrar som t.ex , , subject, , och . De parametern inkluderar filens innehåll och filnamn. Skriptet börjar med att importera nödvändiga moduler och initierar Återsänd-instansen med hjälp av en API-nyckel lagrad i miljövariabler. Funktionen hanterar endast POST förfrågningar, skicka e-postmeddelandet och returnera e-post-ID vid framgång. Om metoden inte är det , ställer den in svarshuvudet på att endast tillåta begär och returnerar en 405-status.

På frontend skapas en React-komponent för att hantera kontaktformuläret. Komponenten upprätthåller tillstånd för filinnehållet och filnamnet med hjälp av Reacts krok. När en fil väljs, a objekt läser filinnehållet som en base64-kodad sträng. Filens innehåll och namn lagras i komponentens tillstånd. Vid inlämning av formuläret skickar en asynkronfunktion ett begäran till backend-API:et med base64-kodat filinnehåll och filnamn. Begärans rubriker är inställda på application/json och begärandekroppen innehåller fildata. Om e-postmeddelandet skickas, visas en varning; annars visas ett felmeddelande.

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;

Hantera filuppladdningar i React Forms

När man hanterar filuppladdningar i React-formulär är det viktigt att säkerställa korrekt hantering av filläsning och datakodning. Använda API i JavaScript tillåter oss att läsa innehållet i filer asynkront, konvertera dem till en base64-kodad sträng, vilket är nödvändigt för att skicka fildata över HTTP. Denna kodade sträng kan enkelt överföras som en del av förfrågningskroppen när du gör API-anrop.

Att se till att fildata läses och kodas korrekt är avgörande för att undvika problem som datakorruption eller ofullständiga uppladdningar. Dessutom kan hantering av olika filtyper och storlekar på rätt sätt förhindra oväntade fel. Korrekt felhantering och användarfeedback, såsom varningar, är också viktiga för att guida användaren genom filuppladdningsprocessen och för att informera dem om något går fel.

1. Vad är syftet med att använda i filuppladdningar?
2. De 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 attribut i inmatningsfältet. Validera dessutom filinnehållet på serversidan.
5. Vad är betydelsen av händelse i ?
6. De 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 när du skickar fildata?
10. 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 metod spela i backend-skriptet?
16. De 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.

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.