Guide til afsendelse af e-mails med vedhæftede filer i React

Backend-script til at sende e-mail med vedhæftet fil ved hjælp af Send igen

Backend-script i Next.js med Send igen

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 til kontaktformular med filvedhæftning

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;

Almindelige spørgsmål og svar om afsendelse af e-mails med vedhæftede filer i React

1. Hvad er formålet med at bruge FileReader i filuploads?
2. Det FileReader API bruges til at læse indholdet af filer asynkront og kode dem som en base64-streng til transmission i HTTP-anmodninger.
3. Hvordan kan jeg sikre, at mine filuploads er sikre?
4. Sørg for, at kun specifikke filtyper accepteres ved at bruge accept attribut i indtastningsfeltet. Derudover skal du validere filindholdet på serversiden.
5. Hvad er betydningen af onload begivenhed i FileReader?
6. Det onload hændelsen udløses, når fillæsningen er fuldført, hvilket giver dig mulighed for at få adgang til filens indhold og udføre yderligere handlinger.
7. Hvordan kan jeg håndtere store filer i React?
8. For store filer kan du overveje at implementere chunk-filuploads for at undgå browserhukommelsesbegrænsninger og give brugeren feedback om fremskridt.
9. Hvorfor skal jeg bruge JSON.stringify når du sender fildata?
10. JSON.stringify konverterer JavaScript-objektet, der indeholder fildataene, til en JSON-streng, som er det påkrævede format for anmodningsteksten i API-kald.
11. Hvad indikerer en 500 (intern serverfejl), når du sender e-mails?
12. En 500-fejl angiver typisk et problem på serversiden, såsom forkert API-endepunktskonfiguration eller problemer inden for e-mail-afsendelsestjenesten.
13. Hvordan kan jeg debugge en 500-fejl i mine API-kald?
14. Kontroller serverlogfiler for detaljerede fejlmeddelelser, og sørg for, at API-slutpunktet og anmodningsnyttelast er konfigureret korrekt.
15. Hvilken rolle spiller res.setHeader metodespil i backend-scriptet?
16. Det res.setHeader metode bruges til at indstille HTTP-svarheaderen, der angiver de tilladte HTTP-metoder (f.eks. 'POST').
17. Hvordan kan jeg give brugerfeedback under filuploads?
18. Brug advarselsmeddelelser, statusbjælker eller statusindikatorer til at informere brugerne om uploadstatus og eventuelle fejl.
19. Kan jeg uploade flere filer på én gang med denne opsætning?
20. Denne opsætning håndterer enkeltfiluploads. For flere filer skal du ændre koden for at håndtere arrays af fildata og sende dem i API-anmodningen.

Endelige tanker om React-kontaktformularer

Implementering af vedhæftede filer i en React-kontaktformular ved hjælp af Gensend involverer både front-end- og back-end-konfigurationer. Front-end håndterer filvalg, læsning og kodning til base64, mens back-end administrerer at sende e-mailen med den vedhæftede fil ved hjælp af Resends API. Korrekt fejlhåndtering og brugerfeedback-mekanismer er afgørende for en problemfri brugeroplevelse. At følge bedste praksis og sikre, at alle konfigurationer er korrekte, kan hjælpe med at undgå almindelige faldgruber som serverfejl.