Guida all'invio di email con allegati in React

Script backend per inviare e-mail con allegato utilizzando Reinvia

Script backend in Next.js con Resend

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;

Componente frontend per modulo di contatto con file allegato

Componente frontend 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;

Domande e risposte comuni sull'invio di e-mail con allegati in React

1. Qual è lo scopo dell'utilizzo FileReader nei caricamenti di file?
2. IL FileReader L'API viene utilizzata per leggere il contenuto dei file in modo asincrono e codificarli come una stringa base64 per la trasmissione nelle richieste HTTP.
3. Come posso garantire che i miei caricamenti di file siano sicuri?
4. Assicurarsi che siano accettati solo tipi di file specifici utilizzando il file accept attributo nel campo di input. Inoltre, convalida il contenuto del file sul lato server.
5. Qual è il significato di onload evento in FileReader?
6. IL onload L'evento viene attivato al termine dell'operazione di lettura del file, consentendo di accedere al contenuto del file ed eseguire ulteriori azioni.
7. Come posso gestire file di grandi dimensioni in React?
8. Per i file di grandi dimensioni, valuta la possibilità di implementare caricamenti di file in blocchi per evitare limitazioni di memoria del browser e fornire feedback sull'avanzamento all'utente.
9. Perché ho bisogno di usare JSON.stringify quando si inviano dati di file?
10. JSON.stringify converte l'oggetto JavaScript contenente i dati del file in una stringa JSON, che è il formato richiesto per il corpo della richiesta nelle chiamate API.
11. Cosa indica un 500 (errore interno del server) quando si inviano e-mail?
12. Un errore 500 indica in genere un problema lato server, ad esempio una configurazione errata dell'endpoint API o problemi all'interno del servizio di invio di posta elettronica.
13. Come posso eseguire il debug di un errore 500 nelle mie chiamate API?
14. Controlla i log del server per messaggi di errore dettagliati e assicurati che l'endpoint API e il payload della richiesta siano configurati correttamente.
15. Che ruolo ha il res.setHeader metodo play nello script di backend?
16. IL res.setHeader Il metodo viene utilizzato per impostare l'intestazione della risposta HTTP, specificando i metodi HTTP consentiti (ad esempio "POST").
17. Come posso fornire feedback agli utenti durante il caricamento dei file?
18. Utilizza messaggi di avviso, barre di avanzamento o indicatori di stato per informare gli utenti dello stato del caricamento e di eventuali errori riscontrati.
19. Posso caricare più file contemporaneamente con questa configurazione?
20. Questa configurazione gestisce i caricamenti di file singoli. Per più file, è necessario modificare il codice per gestire matrici di dati di file e inviarli nella richiesta API.

Considerazioni finali sui moduli di contatto React

L'implementazione degli allegati di file in un modulo di contatto React utilizzando Resend implica configurazioni sia front-end che back-end. Il front-end gestisce la selezione, la lettura e la codifica dei file su base64, mentre il back-end gestisce l'invio dell'e-mail con l'allegato utilizzando l'API Resend. La corretta gestione degli errori e i meccanismi di feedback degli utenti sono cruciali per un'esperienza utente fluida. Seguire le migliori pratiche e garantire che tutte le configurazioni siano corrette può aiutare a evitare insidie ​​​​comuni come errori del server.