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

Backend-script om e-mail met bijlage te verzenden met Opnieuw verzenden

Backend-script in Next.js met Opnieuw verzenden

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;

Frontendcomponent voor contactformulier met bestandsbijlage

Frontend-component 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;

Veelgestelde vragen en antwoorden over het verzenden van e-mails met bijlagen in React

1. Wat is het doel van het gebruik FileReader bij het uploaden van bestanden?
2. De FileReader 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 accept attribuut in het invoerveld. Valideer bovendien de bestandsinhoud aan de serverzijde.
5. Wat is de betekenis van de onload evenement in FileReader?
6. De onload 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 JSON.stringify bij het verzenden van bestandsgegevens?
10. JSON.stringify 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 res.setHeader methode afspelen in het backend-script?
16. De res.setHeader 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.

Laatste gedachten over React-contactformulieren

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.