Veiledning for å sende e-post med vedlegg i React

Opprette et kontaktskjema med filvedlegg

Å lage et kontaktskjema i React som lar brukere sende e-post med filvedlegg kan være utfordrende, spesielt når man integrerer tredjepartstjenester som Resend. Å sikre riktig oppsett og håndtering av filopplastinger er avgjørende for å unngå feil.

Denne guiden vil lede deg gjennom å sette opp et kontaktskjema ved å bruke React and Resend, og tar opp vanlige problemer som håndtering av filvedlegg og feilsøking av serverfeil. Ved å følge disse trinnene vil du kunne sende e-poster med vedlegg sømløst.

Kommando	Beskrivelse
Resend.emails.send()	Sender en e-post med spesifiserte parametere inkludert fra, til, emne, html og vedlegg.
setHeader()	Setter svaroverskriften med spesifiserte parametere. Brukes her for å tillate bare 'POST'-metoden.
FileReader()	Leser innholdet i en fil asynkront. Brukes her for å konvertere filen til en base64-streng.
readAsDataURL()	Metode for FileReader for å lese filen som en base64-kodet streng.
onload()	Hendelsesbehandler for FileReader som utløses når fillesingen er fullført.
split()	Deler en streng i en rekke understrenger. Brukes her for å skille base64-innholdet fra data-URL-prefikset.
JSON.stringify()	Konverterer et JavaScript-objekt eller en JavaScript-verdi til en JSON-streng.

Implementering av e-postvedlegg i React Kontaktskjema

Backend-skriptet lages ved hjelp av Next.js API-ruter og Resend-biblioteket for å sende e-poster med vedlegg. Nøkkelfunksjonen, , brukes til å sende e-posten. Denne funksjonen tar parametere som , , subject, , og . De parameteren inkluderer filinnholdet og filnavnet. Skriptet starter med å importere nødvendige moduler og initialiserer Resend-forekomsten ved å bruke en API-nøkkel som er lagret i miljøvariabler. Funksjonen håndterer kun POST forespørsler, sending av e-post og returnering av e-post-ID ved suksess. Hvis metoden ikke er det , setter den svaroverskriften til bare å tillate ber om og returnerer en 405-status.

På frontend opprettes en React-komponent for å håndtere kontaktskjemaet. Komponenten opprettholder tilstanden for filinnholdet og filnavnet ved å bruke Reacts krok. Når en fil er valgt, a objekt leser filinnholdet som en base64-kodet streng. Filens innhold og navn lagres i komponentens tilstand. Ved innsending av skjema sender en asynkronfunksjon en forespørsel til backend API med base64-kodet filinnhold og filnavn. Forespørselshodene er satt til 1. 3 og forespørselsteksten inneholder fildataene. Hvis e-posten sendes vellykket, vises et varsel; ellers vises et feilvarsel.

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 av filopplastinger i React Forms

Når du håndterer filopplastinger i React-skjemaer, er det viktig å sikre riktig håndtering av fillesing og datakoding. Bruker API i JavaScript lar oss lese innholdet i filer asynkront, konvertere dem til en base64-kodet streng, som er nødvendig for å sende fildata over HTTP. Denne kodede strengen kan enkelt overføres som en del av forespørselsteksten når du foretar API-kall.

Å sikre at fildataene er korrekt lest og kodet er avgjørende for å unngå problemer som datakorrupsjon eller ufullstendige opplastinger. I tillegg kan håndtering av ulike filtyper og størrelser forhindre uventede feil. Riktig feilhåndtering og brukertilbakemeldinger, for eksempel varsler, er også viktig for å veilede brukeren gjennom filopplastingsprosessen og for å informere om noe går galt.

1. Hva er hensikten med å bruke i filopplastinger?
2. De API brukes til å lese innholdet i filer asynkront og kode dem som en base64-streng for overføring i HTTP-forespørsler.
3. Hvordan kan jeg sikre at filopplastingene mine er sikre?
4. Sørg for at bare spesifikke filtyper aksepteres ved å bruke attributt i inntastingsfeltet. I tillegg, valider filinnhold på serversiden.
5. Hva er betydningen av arrangement i ?
6. De hendelsen utløses når fillesingen er fullført, og lar deg få tilgang til filens innhold og utføre ytterligere handlinger.
7. Hvordan kan jeg håndtere store filer i React?
8. For store filer bør du vurdere å implementere filopplastinger i biter for å unngå begrensninger i nettleserens minne og for å gi tilbakemelding om fremdrift til brukeren.
9. Hvorfor trenger jeg å bruke når du sender fildata?
10. konverterer JavaScript-objektet som inneholder fildataene til en JSON-streng, som er det nødvendige formatet for forespørselsteksten i API-kall.
11. Hva indikerer en 500 (intern serverfeil) når du sender e-post?
12. En 500-feil indikerer vanligvis et problem på serversiden, for eksempel feil API-endepunktkonfigurasjon eller problemer med e-postsendingstjenesten.
13. Hvordan kan jeg feilsøke en 500-feil i API-kallene mine?
14. Sjekk serverloggene for detaljerte feilmeldinger og sørg for at API-endepunktet og forespørselsnyttelasten er riktig konfigurert.
15. Hvilken rolle spiller metodespill i backend-skriptet?
16. De metoden brukes til å angi HTTP-svarhodet, og spesifiserer de tillatte HTTP-metodene (f.eks. 'POST').
17. Hvordan kan jeg gi tilbakemelding fra brukere under filopplasting?
18. Bruk varselmeldinger, fremdriftsindikatorer eller statusindikatorer for å informere brukere om opplastingsstatusen og eventuelle feil.
19. Kan jeg laste opp flere filer samtidig med dette oppsettet?
20. Dette oppsettet håndterer enkeltfilopplastinger. For flere filer må du endre koden for å håndtere arrays av fildata og sende dem i API-forespørselen.

Implementering av filvedlegg i et React-kontaktskjema ved å bruke Resend involverer både front-end og back-end konfigurasjoner. Front-end håndterer filvalg, lesing og koding til base64, mens back-end klarer å sende e-posten med vedlegget ved hjelp av Resends API. Riktig feilhåndtering og tilbakemeldingsmekanismer fra brukere er avgjørende for en sømløs brukeropplevelse. Å følge beste praksis og sikre at alle konfigurasjoner er riktige kan bidra til å unngå vanlige fallgruver som serverfeil.