Gids voor het verzenden van e-mails met bijlagen in React

Een contactformulier met bestandsbijlagen maken

Het maken van een contactformulier in React waarmee gebruikers e-mails met bestandsbijlagen kunnen verzenden, kan een uitdaging zijn, vooral bij het integreren van services van derden, zoals Resend. Het garanderen van de juiste configuratie en afhandeling van bestandsuploads is van cruciaal belang om fouten te voorkomen.

Deze handleiding begeleidt u bij het opzetten van een contactformulier met behulp van Reageren en opnieuw verzenden, waarbij veelvoorkomende problemen worden behandeld, zoals het verwerken van bestandsbijlagen en het opsporen van serverfouten. Door deze stappen te volgen, kunt u naadloos e-mails met bijlagen verzenden.

Commando	Beschrijving
Resend.emails.send()	Stuurt een e-mail met gespecificeerde parameters, waaronder van, naar, onderwerp, html en bijlagen.
setHeader()	Stelt de antwoordheader in met opgegeven parameters. Hier gebruikt om alleen de 'POST'-methode toe te staan.
FileReader()	Leest de inhoud van een bestand asynchroon. Hier gebruikt om het bestand naar een base64-string te converteren.
readAsDataURL()	Methode van FileReader om het bestand te lezen als een base64-gecodeerde string.
onload()	Gebeurtenishandler voor FileReader die wordt geactiveerd wanneer het lezen van bestanden is voltooid.
split()	Splitst een tekenreeks in een array van subtekenreeksen. Wordt hier gebruikt om de base64-inhoud te scheiden van het gegevens-URL-voorvoegsel.
JSON.stringify()	Converteert een JavaScript-object of -waarde naar een JSON-tekenreeks.

E-mailbijlage implementeren in React-contactformulier

Het backend-script is gemaakt met behulp van Next.js API-routes en de Resend-bibliotheek om e-mails met bijlagen te verzenden. De sleutelfunctie, , wordt gebruikt om de e-mail te verzenden. Deze functie gebruikt parameters zoals , , subject, , En . De parameter omvat de bestandsinhoud en bestandsnaam. Het script begint met het importeren van de benodigde modules en initialiseert de Resend-instantie met behulp van een API-sleutel die is opgeslagen in omgevingsvariabelen. De functie behandelt alleen POST verzoeken, het verzenden van de e-mail en het retourneren van de e-mail-ID bij succes. Als de methode dat niet is , wordt de antwoordheader ingesteld op alleen toestaan vraagt ​​en retourneert een 405-status.

Op de frontend wordt een React-component gemaakt om het contactformulier af te handelen. De component onderhoudt de status van de bestandsinhoud en de bestandsnaam met behulp van React haak. Wanneer een bestand is geselecteerd, wordt a object leest de bestandsinhoud als een base64-gecodeerde tekenreeks. De inhoud en naam van het bestand worden opgeslagen in de staat van het onderdeel. Bij het indienen van een formulier verzendt een asynchrone functie een verzoek aan de backend-API met de base64-gecodeerde bestandsinhoud en bestandsnaam. De verzoekheaders zijn ingesteld op application/json en de verzoektekst bevat de bestandsgegevens. Als de e-mail succesvol is verzonden, wordt er een waarschuwing weergegeven; anders wordt er een foutmelding weergegeven.

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;

Bestandsuploads in reactieformulieren afhandelen

Bij het omgaan met bestandsuploads in React-formulieren is het essentieel om te zorgen voor de juiste afhandeling van het lezen van bestanden en het coderen van gegevens. De ... gebruiken API in JavaScript stelt ons in staat de inhoud van bestanden asynchroon te lezen en deze te converteren naar een base64-gecodeerde string, die nodig is voor het verzenden van bestandsgegevens via HTTP. Deze gecodeerde tekenreeks kan eenvoudig worden verzonden als onderdeel van de verzoektekst bij het uitvoeren van API-aanroepen.

Ervoor zorgen dat de bestandsgegevens correct worden gelezen en gecodeerd, is van cruciaal belang om problemen zoals gegevensbeschadiging of onvolledige uploads te voorkomen. Bovendien kan een juiste omgang met verschillende bestandstypen en -groottes onverwachte fouten voorkomen. Een goede foutafhandeling en gebruikersfeedback, zoals waarschuwingen, zijn ook belangrijk om de gebruiker door het bestandsuploadproces te leiden en hem te informeren als er iets misgaat.

1. Wat is het doel van het gebruik bij het uploaden van bestanden?
2. De API wordt gebruikt om de inhoud van bestanden asynchroon te lezen en deze te coderen als een base64-tekenreeks voor verzending in HTTP-verzoeken.
3. Hoe kan ik ervoor zorgen dat mijn bestandsuploads veilig zijn?
4. Zorg ervoor dat alleen specifieke bestandstypen worden geaccepteerd door de attribuut in het invoerveld. Valideer bovendien de bestandsinhoud aan de serverzijde.
5. Wat is de betekenis van de evenement in ?
6. De gebeurtenis wordt geactiveerd wanneer het lezen van het bestand is voltooid, waardoor u toegang krijgt tot de inhoud van het bestand en verdere acties kunt uitvoeren.
7. Hoe kan ik omgaan met grote bestanden in React?
8. Voor grote bestanden kunt u overwegen om gefragmenteerde bestandsuploads te implementeren om beperkingen in het browsergeheugen te voorkomen en om voortgangsfeedback aan de gebruiker te geven.
9. Waarom moet ik gebruiken bij het verzenden van bestandsgegevens?
10. converteert het JavaScript-object dat de bestandsgegevens bevat naar een JSON-tekenreeks, wat het vereiste formaat is voor de verzoektekst bij API-aanroepen.
11. Wat geeft een 500 (Internal Server Error) aan bij het verzenden van e-mails?
12. Een 500-fout duidt doorgaans op een probleem aan de serverzijde, zoals een onjuiste API-eindpuntconfiguratie of problemen binnen de e-mailverzendservice.
13. Hoe kan ik een 500-fout in mijn API-aanroepen debuggen?
14. Controleer de serverlogboeken op gedetailleerde foutmeldingen en zorg ervoor dat het API-eindpunt en de verzoekpayload correct zijn geconfigureerd.
15. Welke rol speelt de methode afspelen in het backend-script?
16. De methode wordt gebruikt om de HTTP-antwoordheader in te stellen, waarbij de toegestane HTTP-methoden worden gespecificeerd (bijvoorbeeld 'POST').
17. Hoe kan ik gebruikersfeedback geven tijdens het uploaden van bestanden?
18. Gebruik waarschuwingsberichten, voortgangsbalken of statusindicatoren om gebruikers te informeren over de uploadstatus en eventuele fouten die ze tegenkomen.
19. Kan ik met deze configuratie meerdere bestanden tegelijk uploaden?
20. Deze opstelling verwerkt het uploaden van afzonderlijke bestanden. Voor meerdere bestanden moet u de code aanpassen om arrays met bestandsgegevens te verwerken en deze in het API-verzoek te verzenden.

Het implementeren van bestandsbijlagen in een React-contactformulier met Resend omvat zowel front-end- als back-end-configuraties. De front-end zorgt voor het selecteren, lezen en coderen van bestanden naar base64, terwijl de back-end het verzenden van de e-mail met de bijlage beheert met behulp van de API van Resend. Een goede foutafhandeling en gebruikersfeedbackmechanismen zijn cruciaal voor een naadloze gebruikerservaring. Het volgen van best practices en ervoor zorgen dat alle configuraties correct zijn, kan veelvoorkomende valkuilen zoals serverfouten helpen voorkomen.