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

Création d'un formulaire de contact avec des pièces jointes

Créer un formulaire de contact dans React qui permet aux utilisateurs d'envoyer des e-mails avec des pièces jointes peut s'avérer difficile, en particulier lors de l'intégration de services tiers tels que Resend. Assurer la configuration et la gestion correctes des téléchargements de fichiers est crucial pour éviter les erreurs.

Ce guide vous guidera dans la configuration d'un formulaire de contact à l'aide de React et Resend, en abordant les problèmes courants tels que la gestion des pièces jointes et le débogage des erreurs du serveur. En suivant ces étapes, vous pourrez envoyer des e-mails avec des pièces jointes de manière transparente.

Commande	Description
Resend.emails.send()	Envoie un e-mail avec les paramètres spécifiés, notamment de, à, sujet, HTML et pièces jointes.
setHeader()	Définit l'en-tête de réponse avec les paramètres spécifiés. Utilisé ici pour autoriser uniquement la méthode 'POST'.
FileReader()	Lit le contenu d'un fichier de manière asynchrone. Utilisé ici pour convertir le fichier en chaîne base64.
readAsDataURL()	Méthode de FileReader pour lire le fichier sous forme de chaîne codée en base64.
onload()	Gestionnaire d'événements pour FileReader qui est déclenché lorsque l'opération de lecture du fichier est terminée.
split()	Divise une chaîne en un tableau de sous-chaînes. Utilisé ici pour séparer le contenu base64 du préfixe d'URL de données.
JSON.stringify()	Convertit un objet ou une valeur JavaScript en chaîne JSON.

Implémentation de la pièce jointe à un e-mail dans le formulaire de contact React

Le script backend est créé à l'aide des routes API Next.js et de la bibliothèque Resend pour envoyer des e-mails avec des pièces jointes. La fonction clé, , est utilisé pour envoyer l'e-mail. Cette fonction prend des paramètres tels que , , subject, , et . Le Le paramètre inclut le contenu et le nom du fichier. Le script commence par importer les modules nécessaires et initialise l'instance Resend à l'aide d'une clé API stockée dans les variables d'environnement. La fonction gère uniquement POST demandes, envoi de l'e-mail et renvoi de l'identifiant de l'e-mail en cas de succès. Si la méthode n'est pas , il définit l'en-tête de réponse pour autoriser uniquement demande et renvoie un statut 405.

Sur le frontend, un composant React est créé pour gérer le formulaire de contact. Le composant conserve l'état du contenu et du nom du fichier à l'aide de React. crochet. Lorsqu'un fichier est sélectionné, un L'objet lit le contenu du fichier sous forme de chaîne codée en base64. Le contenu et le nom du fichier sont stockés dans l'état du composant. Lors de la soumission du formulaire, une fonction asynchrone envoie un demande à l'API backend avec le contenu et le nom du fichier encodés en base64. Les en-têtes de requête sont définis sur application/json et le corps de la demande contient les données du fichier. Si l'e-mail est envoyé avec succès, une alerte s'affiche ; sinon, une alerte d'erreur s'affiche.

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;

Gestion des téléchargements de fichiers dans React Forms

Lorsqu'il s'agit de téléchargements de fichiers dans des formulaires React, il est essentiel de garantir la bonne gestion de la lecture des fichiers et de l'encodage des données. En utilisant le L'API en JavaScript nous permet de lire le contenu des fichiers de manière asynchrone, en les convertissant en une chaîne codée en base64, nécessaire pour envoyer les données du fichier via HTTP. Cette chaîne codée peut être facilement transmise dans le cadre du corps de la requête lors des appels d'API.

S'assurer que les données du fichier sont correctement lues et codées est crucial pour éviter des problèmes tels que la corruption des données ou des téléchargements incomplets. De plus, la gestion appropriée de différents types et tailles de fichiers peut éviter des erreurs inattendues. Une gestion appropriée des erreurs et des commentaires des utilisateurs, tels que des alertes, sont également importants pour guider l'utilisateur tout au long du processus de téléchargement de fichiers et pour l'informer en cas de problème.

1. Quel est le but d'utiliser dans les téléchargements de fichiers ?
2. Le 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 attribut dans le champ de saisie. De plus, validez le contenu du fichier côté serveur.
5. Quelle est la signification du événement dans ?
6. Le 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 lors de l'envoi de données de fichier ?
10. 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 la méthode est-elle jouée dans le script backend ?
16. Le 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.

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.