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

Crear un formulario de contacto con archivos adjuntos

Crear un formulario de contacto en React que permita a los usuarios enviar correos electrónicos con archivos adjuntos puede ser un desafío, especialmente cuando se integran servicios de terceros como Resend. Garantizar la configuración y el manejo correctos de la carga de archivos es fundamental para evitar errores.

Esta guía lo guiará a través de la configuración de un formulario de contacto usando React y Resend, abordando problemas comunes como el manejo de archivos adjuntos y la depuración de errores del servidor. Si sigue estos pasos, podrá enviar correos electrónicos con archivos adjuntos sin problemas.

Dominio	Descripción
Resend.emails.send()	Envía un correo electrónico con parámetros específicos que incluyen desde, hacia, asunto, html y archivos adjuntos.
setHeader()	Establece el encabezado de respuesta con parámetros especificados. Se utiliza aquí para permitir únicamente el método 'POST'.
FileReader()	Lee el contenido de un archivo de forma asincrónica. Se utiliza aquí para convertir el archivo a una cadena base64.
readAsDataURL()	Método de FileReader para leer el archivo como una cadena codificada en base64.
onload()	Controlador de eventos para FileReader que se activa cuando se completa la operación de lectura del archivo.
split()	Divide una cadena en una matriz de subcadenas. Se utiliza aquí para separar el contenido base64 del prefijo de URL de datos.
JSON.stringify()	Convierte un objeto o valor de JavaScript en una cadena JSON.

Implementación de archivos adjuntos de correo electrónico en el formulario de contacto de React

El script de backend se crea utilizando las rutas API de Next.js y la biblioteca Resend para enviar correos electrónicos con archivos adjuntos. La función clave, , se utiliza para enviar el correo electrónico. Esta función toma parámetros como , , subject, , y . El El parámetro incluye el contenido del archivo y el nombre del archivo. El script comienza importando los módulos necesarios e inicializa la instancia de Resend utilizando una clave API almacenada en variables de entorno. La función sólo maneja POST solicitudes, enviando el correo electrónico y devolviendo la identificación del correo electrónico en caso de éxito. Si el método no es , establece el encabezado de respuesta para permitir solo solicita y devuelve un estado 405.

En la interfaz, se crea un componente React para manejar el formulario de contacto. El componente mantiene el estado del contenido y el nombre del archivo utilizando React's gancho. Cuando se selecciona un archivo, aparece un El objeto lee el contenido del archivo como una cadena codificada en base64. El contenido y el nombre del archivo se almacenan en el estado del componente. Al enviar el formulario, una función asíncrona envía un Solicite a la API de backend con el contenido y el nombre del archivo codificado en base64. Los encabezados de solicitud están configurados para application/json y el cuerpo de la solicitud contiene los datos del archivo. Si el correo electrónico se envía correctamente, se muestra una alerta; de lo contrario, se muestra una alerta de error.

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;

Manejo de cargas de archivos en React Forms

Cuando se trata de cargas de archivos en formularios de React, es esencial garantizar el manejo correcto de la lectura de archivos y la codificación de datos. Utilizando el La API en JavaScript nos permite leer el contenido de los archivos de forma asincrónica, convirtiéndolos en una cadena codificada en base64, que es necesaria para enviar datos de archivos a través de HTTP. Esta cadena codificada se puede transmitir fácilmente como parte del cuerpo de la solicitud al realizar llamadas a la API.

Garantizar que los datos del archivo se lean y codifiquen correctamente es fundamental para evitar problemas como la corrupción de datos o cargas incompletas. Además, manejar adecuadamente varios tipos y tamaños de archivos puede evitar errores inesperados. El manejo adecuado de errores y los comentarios de los usuarios, como las alertas, también son importantes para guiar al usuario a través del proceso de carga de archivos e informarle si algo sale mal.

1. ¿Cuál es el propósito de usar? en la carga de archivos?
2. El 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 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 evento en ?
6. El 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 al enviar datos de archivos?
10. 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 ¿Método de reproducción en el script backend?
16. El 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.

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.