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

Oprettelse af en kontaktformular med vedhæftede filer

At oprette en kontaktformular i React, der giver brugerne mulighed for at sende e-mails med vedhæftede filer, kan være udfordrende, især når man integrerer tredjepartstjenester som Gensend. Det er afgørende at sikre den korrekte opsætning og håndtering af filuploads for at undgå fejl.

Denne vejledning vil guide dig gennem opsætningen af ​​en kontaktformular ved hjælp af React and Resend, der behandler almindelige problemer såsom håndtering af vedhæftede filer og fejlretning af serverfejl. Ved at følge disse trin vil du være i stand til at sende e-mails med vedhæftede filer problemfrit.

Kommando	Beskrivelse
Resend.emails.send()	Sender en e-mail med specificerede parametre inklusive fra, til, emne, html og vedhæftede filer.
setHeader()	Indstiller svaroverskriften med specificerede parametre. Bruges her til kun at tillade 'POST'-metoden.
FileReader()	Læser indholdet af en fil asynkront. Bruges her til at konvertere filen til en base64-streng.
readAsDataURL()	Metode til FileReader til at læse filen som en base64-kodet streng.
onload()	Hændelseshandler for FileReader, der udløses, når fillæsningen er fuldført.
split()	Opdeler en streng i en række af understrenge. Bruges her til at adskille base64-indholdet fra data-URL-præfikset.
JSON.stringify()	Konverterer et JavaScript-objekt eller en JavaScript-værdi til en JSON-streng.

Implementering af e-mailvedhæftet fil i React Kontaktformular

Backend-scriptet oprettes ved hjælp af Next.js API-ruter og Gensend-biblioteket til at sende e-mails med vedhæftede filer. Nøglefunktionen, , bruges til at sende e-mailen. Denne funktion tager parametre som f.eks , , subject, , og . Det parameter inkluderer filindholdet og filnavnet. Scriptet starter med at importere nødvendige moduler og initialiserer Gensend-forekomsten ved hjælp af en API-nøgle gemt i miljøvariabler. Funktionen håndterer kun POST anmodninger, afsendelse af e-mailen og returnering af e-mail-id'et ved succes. Hvis metoden ikke er det , indstiller den svaroverskriften til kun at tillade anmoder om og returnerer en 405-status.

På frontenden oprettes en React-komponent til at håndtere kontaktformularen. Komponenten opretholder tilstanden for filindholdet og filnavnet ved hjælp af React's krog. Når en fil er valgt, a objekt læser filindholdet som en base64-kodet streng. Filens indhold og navn gemmes i komponentens tilstand. Ved indsendelse af formularen sender en async-funktion en anmodning til backend-API'et med det base64-kodede filindhold og filnavn. Anmodningsoverskrifterne er indstillet til application/json og anmodningsteksten indeholder fildataene. Hvis e-mailen sendes med succes, vises en advarsel; ellers vises en fejlalarm.

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;

Håndtering af filuploads i React Forms

Når man håndterer filupload i React-formularer, er det vigtigt at sikre korrekt håndtering af fillæsning og datakodning. Bruger API i JavaScript giver os mulighed for at læse indholdet af filer asynkront og konvertere dem til en base64-kodet streng, som er nødvendig for at sende fildata over HTTP. Denne kodede streng kan nemt overføres som en del af anmodningsteksten, når der foretages API-kald.

Det er afgørende at sikre, at fildataene læses og kodes korrekt for at undgå problemer som datakorruption eller ufuldstændige uploads. Derudover kan håndtering af forskellige filtyper og -størrelser forhindre uventede fejl. Korrekt fejlhåndtering og brugerfeedback, såsom advarsler, er også vigtige for at guide brugeren gennem filoverførselsprocessen og informere dem, hvis noget går galt.

1. Hvad er formålet med at bruge i filuploads?
2. Det 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 attribut i indtastningsfeltet. Derudover skal du validere filindholdet på serversiden.
5. Hvad er betydningen af begivenhed i ?
6. Det 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 når du sender fildata?
10. 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 metodespil i backend-scriptet?
16. Det 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.

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.