Guida all'invio di email con allegati in React

Creazione di un modulo di contatto con file allegati

Creare un modulo di contatto in React che consenta agli utenti di inviare e-mail con allegati di file può essere complicato, soprattutto quando si integrano servizi di terze parti come Resend. Garantire la corretta configurazione e gestione dei caricamenti di file è fondamentale per evitare errori.

Questa guida ti guiderà attraverso la configurazione di un modulo di contatto utilizzando React e Resend, affrontando problemi comuni come la gestione dei file allegati e il debug degli errori del server. Seguendo questi passaggi, sarai in grado di inviare e-mail con allegati senza problemi.

Comando	Descrizione
Resend.emails.send()	Invia un'e-mail con parametri specificati tra cui da, a, oggetto, html e allegati.
setHeader()	Imposta l'intestazione della risposta con i parametri specificati. Utilizzato qui per consentire solo il metodo 'POST'.
FileReader()	Legge il contenuto di un file in modo asincrono. Utilizzato qui per convertire il file in una stringa base64.
readAsDataURL()	Metodo di FileReader per leggere il file come stringa codificata base64.
onload()	Gestore eventi per FileReader che viene attivato al completamento dell'operazione di lettura del file.
split()	Divide una stringa in una matrice di sottostringhe. Utilizzato qui per separare il contenuto base64 dal prefisso URL dei dati.
JSON.stringify()	Converte un oggetto o valore JavaScript in una stringa JSON.

Implementazione dell'allegato e-mail nel modulo di contatto React

Lo script backend viene creato utilizzando i percorsi API Next.js e la libreria Resend per inviare e-mail con allegati. La funzione chiave, , viene utilizzato per inviare l'e-mail. Questa funzione accetta parametri come , , subject, , E . IL Il parametro include il contenuto del file e il nome del file. Lo script inizia importando i moduli necessari e inizializza l'istanza di Resend utilizzando una chiave API memorizzata nelle variabili di ambiente. La funzione gestisce solo POST richieste, inviando l'e-mail e restituendo l'ID e-mail in caso di successo. Se il metodo non lo è , imposta l'intestazione della risposta su consenti solo richiede e restituisce uno stato 405.

Sul frontend viene creato un componente React per gestire il modulo di contatto. Il componente mantiene lo stato del contenuto e del nome del file utilizzando React gancio. Quando viene selezionato un file, a L'oggetto legge il contenuto del file come una stringa codificata base64. Il contenuto e il nome del file vengono archiviati nello stato del componente. All'invio del modulo, una funzione asincrona invia un file richiesta all'API back-end con il contenuto e il nome del file codificato base64. Le intestazioni della richiesta sono impostate su application/json e il corpo della richiesta contiene i dati del file. Se l'email viene inviata con successo, viene mostrato un avviso; in caso contrario, verrà visualizzato un avviso di errore.

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;

Gestione dei caricamenti di file nei moduli React

Quando si ha a che fare con il caricamento di file nei moduli React, è essenziale garantire la corretta gestione della lettura dei file e della codifica dei dati. Usando il L'API in JavaScript ci consente di leggere il contenuto dei file in modo asincrono, convertendoli in una stringa codificata base64, necessaria per inviare i dati del file tramite HTTP. Questa stringa codificata può essere facilmente trasmessa come parte del corpo della richiesta quando si effettuano chiamate API.

Garantire che i dati del file vengano letti e codificati correttamente è fondamentale per evitare problemi come la corruzione dei dati o caricamenti incompleti. Inoltre, la gestione appropriata di vari tipi e dimensioni di file può prevenire errori imprevisti. Anche la corretta gestione degli errori e il feedback dell'utente, come gli avvisi, sono importanti per guidare l'utente attraverso il processo di caricamento del file e per informarlo se qualcosa va storto.

1. Qual è lo scopo dell'utilizzo nei caricamenti di file?
2. IL 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 attributo nel campo di input. Inoltre, convalida il contenuto del file sul lato server.
5. Qual è il significato di evento in ?
6. IL 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 quando si inviano dati di file?
10. 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 metodo play nello script di backend?
16. IL 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.

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.