Guide d'envoi d'e-mails avec pièces jointes dans React

Script backend pour envoyer un e-mail avec pièce jointe à l'aide de Renvoyer

Script backend dans Next.js avec 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;

Composant frontal pour formulaire de contact avec pièce jointe

Composant frontend dans 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;

Questions et réponses courantes sur l'envoi d'e-mails avec pièces jointes dans React

1. Quel est le but d'utiliser FileReader dans les téléchargements de fichiers ?
2. Le FileReader L'API est utilisée pour lire le contenu des fichiers de manière asynchrone et les coder sous forme de chaîne base64 pour la transmission dans les requêtes HTTP.
3. Comment puis-je m'assurer que mes téléchargements de fichiers sont sécurisés ?
4. Assurez-vous que seuls des types de fichiers spécifiques sont acceptés en utilisant le accept attribut dans le champ de saisie. De plus, validez le contenu du fichier côté serveur.
5. Quelle est la signification du onload événement dans FileReader?
6. Le onload L'événement est déclenché lorsque l'opération de lecture du fichier est terminée, vous permettant d'accéder au contenu du fichier et d'effectuer d'autres actions.
7. Comment puis-je gérer des fichiers volumineux dans React ?
8. Pour les fichiers volumineux, envisagez de mettre en œuvre des téléchargements de fichiers fragmentés pour éviter les limitations de mémoire du navigateur et pour fournir des informations sur la progression à l'utilisateur.
9. Pourquoi dois-je utiliser JSON.stringify lors de l'envoi de données de fichier ?
10. JSON.stringify convertit l'objet JavaScript contenant les données du fichier en chaîne JSON, qui est le format requis pour le corps de la requête dans les appels d'API.
11. Qu'indique un 500 (erreur interne du serveur) lors de l'envoi d'e-mails ?
12. Une erreur 500 indique généralement un problème côté serveur, tel qu'une configuration incorrecte du point de terminaison de l'API ou des problèmes au sein du service d'envoi d'e-mails.
13. Comment puis-je déboguer une erreur 500 dans mes appels API ?
14. Consultez les journaux du serveur pour connaître les messages d'erreur détaillés et assurez-vous que le point de terminaison de l'API et la charge utile de la demande sont correctement configurés.
15. Quel rôle joue le res.setHeader la méthode est-elle jouée dans le script backend ?
16. Le res.setHeader La méthode est utilisée pour définir l'en-tête de réponse HTTP, en spécifiant les méthodes HTTP autorisées (par exemple, 'POST').
17. Comment puis-je fournir des commentaires aux utilisateurs lors du téléchargement de fichiers ?
18. Utilisez des messages d'alerte, des barres de progression ou des indicateurs d'état pour informer les utilisateurs de l'état du téléchargement et des erreurs rencontrées.
19. Puis-je télécharger plusieurs fichiers à la fois avec cette configuration ?
20. Cette configuration gère les téléchargements de fichiers uniques. Pour plusieurs fichiers, vous devez modifier le code pour gérer les tableaux de données de fichiers et les envoyer dans la requête API.

Réflexions finales sur les formulaires de contact React

L'implémentation de pièces jointes dans un formulaire de contact React à l'aide de Resend implique à la fois des configurations front-end et back-end. Le front-end gère la sélection, la lecture et l'encodage des fichiers en base64, tandis que le back-end gère l'envoi de l'e-mail avec la pièce jointe à l'aide de l'API de Resend. Une gestion appropriée des erreurs et des mécanismes de retour d’information des utilisateurs sont essentiels pour une expérience utilisateur fluide. Suivre les meilleures pratiques et s'assurer que toutes les configurations sont correctes peut aider à éviter les pièges courants tels que les erreurs de serveur.