Guía para enviar correos electrónicos con archivos adjuntos en React

Script de backend para enviar correos electrónicos con archivos adjuntos usando Reenviar

Script de backend en Next.js con reenvío

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 de interfaz para formulario de contacto con archivo adjunto

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

Preguntas y respuestas comunes sobre el envío de correos electrónicos con archivos adjuntos en React

1. ¿Cuál es el propósito de usar? FileReader en la carga de archivos?
2. El FileReader La API se utiliza para leer el contenido de los archivos de forma asincrónica y codificarlos como una cadena base64 para su transmisión en solicitudes HTTP.
3. ¿Cómo puedo asegurarme de que la carga de mis archivos sea segura?
4. Asegúrese de que solo se acepten tipos de archivos específicos utilizando el accept atributo en el campo de entrada. Además, valide el contenido del archivo en el lado del servidor.
5. ¿Cuál es el significado de la onload evento en FileReader?
6. El onload El evento se activa cuando se completa la operación de lectura del archivo, lo que le permite acceder al contenido del archivo y realizar más acciones.
7. ¿Cómo puedo manejar archivos grandes en React?
8. Para archivos grandes, considere implementar cargas de archivos fragmentados para evitar limitaciones de memoria del navegador y proporcionar comentarios sobre el progreso al usuario.
9. ¿Por qué necesito usar JSON.stringify al enviar datos de archivos?
10. JSON.stringify convierte el objeto JavaScript que contiene los datos del archivo en una cadena JSON, que es el formato requerido para el cuerpo de la solicitud en las llamadas API.
11. ¿Qué indica un 500 (Error interno del servidor) al enviar correos electrónicos?
12. Un error 500 normalmente indica un problema del lado del servidor, como una configuración incorrecta del punto final de API o problemas dentro del servicio de envío de correo electrónico.
13. ¿Cómo puedo depurar un error 500 en mis llamadas API?
14. Consulte los registros del servidor para ver mensajes de error detallados y asegúrese de que el punto final de la API y la carga útil de la solicitud estén configurados correctamente.
15. ¿Qué papel cumple el res.setHeader ¿Método de reproducción en el script backend?
16. El res.setHeader El método se utiliza para configurar el encabezado de respuesta HTTP, especificando los métodos HTTP permitidos (por ejemplo, 'POST').
17. ¿Cómo puedo proporcionar comentarios de los usuarios durante la carga de archivos?
18. Utilice mensajes de alerta, barras de progreso o indicadores de estado para informar a los usuarios sobre el estado de la carga y cualquier error encontrado.
19. ¿Puedo cargar varios archivos a la vez con esta configuración?
20. Esta configuración maneja cargas de archivos individuales. Para varios archivos, debe modificar el código para manejar matrices de datos de archivos y enviarlos en la solicitud API.

Reflexiones finales sobre los formularios de contacto de React

La implementación de archivos adjuntos en un formulario de contacto de React usando Resend implica configuraciones tanto de front-end como de back-end. El front-end maneja la selección, lectura y codificación de archivos en base64, mientras que el back-end administra el envío del correo electrónico con el archivo adjunto utilizando la API de Resend. El manejo adecuado de errores y los mecanismos de retroalimentación de los usuarios son cruciales para una experiencia de usuario perfecta. Seguir las mejores prácticas y garantizar que todas las configuraciones sean correctas puede ayudar a evitar errores comunes, como los errores del servidor.