Veiledning for å sende e-post med vedlegg i React

Backend-skript for å sende e-post med vedlegg ved å bruke Send på nytt

Backend-skript i Next.js med Send på nytt

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 for kontaktskjema med filvedlegg

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;

Vanlige spørsmål og svar om å sende e-poster med vedlegg i React

1. Hva er hensikten med å bruke FileReader i filopplastinger?
2. De FileReader 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 accept attributt i inntastingsfeltet. I tillegg, valider filinnhold på serversiden.
5. Hva er betydningen av onload arrangement i FileReader?
6. De onload 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 JSON.stringify når du sender fildata?
10. JSON.stringify 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 res.setHeader metodespill i backend-skriptet?
16. De res.setHeader 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.

Siste tanker om React-kontaktskjemaer

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.