Guia para enviar e-mails com anexos no React

Script de back-end para enviar e-mail com anexo usando reenviar

Script de back-end em Next.js com Reenviar

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 frontend para formulário de contato com anexo de arquivo

Componente front-end em 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;

Perguntas e respostas comuns sobre o envio de e-mails com anexos no React

1. Qual é o propósito de usar FileReader em uploads de arquivos?
2. O FileReader A API é usada para ler o conteúdo dos arquivos de forma assíncrona e codificá-los como uma string base64 para transmissão em solicitações HTTP.
3. Como posso garantir que meus uploads de arquivos sejam seguros?
4. Certifique-se de que apenas tipos de arquivo específicos sejam aceitos usando o accept atributo no campo de entrada. Além disso, valide o conteúdo do arquivo no lado do servidor.
5. Qual é o significado do onload evento em FileReader?
6. O onload O evento é acionado quando a operação de leitura do arquivo é concluída, permitindo acessar o conteúdo do arquivo e executar outras ações.
7. Como posso lidar com arquivos grandes no React?
8. Para arquivos grandes, considere implementar uploads de arquivos em partes para evitar limitações de memória do navegador e fornecer feedback de progresso ao usuário.
9. Por que preciso usar JSON.stringify ao enviar dados do arquivo?
10. JSON.stringify converte o objeto JavaScript que contém os dados do arquivo em uma string JSON, que é o formato necessário para o corpo da solicitação em chamadas de API.
11. O que indica um 500 (Erro interno do servidor) ao enviar e-mails?
12. Um erro 500 normalmente indica um problema no servidor, como configuração incorreta do endpoint da API ou problemas no serviço de envio de e-mail.
13. Como posso depurar um erro 500 nas minhas chamadas de API?
14. Verifique os logs do servidor para obter mensagens de erro detalhadas e certifique-se de que o endpoint da API e a carga útil da solicitação estejam configurados corretamente.
15. Que papel desempenha o res.setHeader método play no script de back-end?
16. O res.setHeader é usado para definir o cabeçalho de resposta HTTP, especificando os métodos HTTP permitidos (por exemplo, 'POST').
17. Como posso fornecer feedback ao usuário durante uploads de arquivos?
18. Use mensagens de alerta, barras de progresso ou indicadores de status para informar os usuários sobre o status do upload e quaisquer erros encontrados.
19. Posso fazer upload de vários arquivos de uma vez com esta configuração?
20. Esta configuração lida com uploads de arquivo único. Para vários arquivos, você precisa modificar o código para lidar com matrizes de dados de arquivo e enviá-los na solicitação de API.

Considerações finais sobre formulários de contato React

A implementação de anexos de arquivo em um formulário de contato React usando Reenviar envolve configurações de front-end e back-end. O front-end cuida da seleção, leitura e codificação do arquivo em base64, enquanto o back-end gerencia o envio do e-mail com o anexo usando a API do Resend. O tratamento adequado de erros e os mecanismos de feedback do usuário são cruciais para uma experiência de usuário perfeita. Seguir as práticas recomendadas e garantir que todas as configurações estejam corretas pode ajudar a evitar armadilhas comuns, como erros de servidor.