Guia para enviar e-mails com anexos no React

Criando um formulário de contato com anexos de arquivo

Criar um formulário de contato no React que permita aos usuários enviar e-mails com anexos de arquivos pode ser um desafio, especialmente ao integrar serviços de terceiros como Reenviar. Garantir a configuração e o manuseio corretos dos uploads de arquivos é crucial para evitar erros.

Este guia orientará você na configuração de um formulário de contato usando React e Resend, abordando problemas comuns, como manipulação de anexos de arquivos e depuração de erros do servidor. Seguindo estas etapas, você poderá enviar e-mails com anexos perfeitamente.

Comando	Descrição
Resend.emails.send()	Envia um e-mail com parâmetros especificados, incluindo de, para, assunto, html e anexos.
setHeader()	Define o cabeçalho de resposta com parâmetros especificados. Usado aqui para permitir apenas o método 'POST'.
FileReader()	Lê o conteúdo de um arquivo de forma assíncrona. Usado aqui para converter o arquivo em uma string base64.
readAsDataURL()	Método de FileReader para ler o arquivo como uma string codificada em base64.
onload()	Manipulador de eventos para FileReader que é acionado quando a operação de leitura do arquivo é concluída.
split()	Divide uma string em uma matriz de substrings. Usado aqui para separar o conteúdo base64 do prefixo do URL de dados.
JSON.stringify()	Converte um objeto ou valor JavaScript em uma string JSON.

Implementando anexo de e-mail no formulário de contato React

O script de back-end é criado usando rotas da API Next.js e a biblioteca Reenviar para enviar e-mails com anexos. A função principal, , é usado para enviar o e-mail. Esta função recebe parâmetros como , , subject, , e . O O parâmetro inclui o conteúdo e o nome do arquivo. O script começa importando os módulos necessários e inicializa a instância Resend usando uma chave de API armazenada em variáveis ​​de ambiente. A função trata apenas POST solicitações, enviando o e-mail e retornando o ID do e-mail em caso de sucesso. Se o método não for , ele define o cabeçalho de resposta para permitir apenas solicita e retorna um status 405.

No frontend, um componente React é criado para lidar com o formulário de contato. O componente mantém o estado do conteúdo e do nome do arquivo usando o React's gancho. Quando um arquivo é selecionado, um object lê o conteúdo do arquivo como uma string codificada em base64. O conteúdo e o nome do arquivo são armazenados no estado do componente. No envio do formulário, uma função assíncrona envia um solicitação para a API de back-end com o conteúdo e o nome do arquivo codificado em base64. Os cabeçalhos da solicitação são definidos como application/json e o corpo da solicitação contém os dados do arquivo. Se o e-mail for enviado com sucesso, um alerta será mostrado; caso contrário, um alerta de erro será exibido.

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;

Tratamento de uploads de arquivos em formulários React

Ao lidar com uploads de arquivos em formulários React, é essencial garantir o correto manuseio da leitura dos arquivos e codificação dos dados. Usando o A API em JavaScript nos permite ler o conteúdo dos arquivos de forma assíncrona, convertendo-os em uma string codificada em base64, necessária para enviar dados do arquivo por HTTP. Essa string codificada pode ser facilmente transmitida como parte do corpo da solicitação ao fazer chamadas de API.

Garantir que os dados do arquivo sejam lidos e codificados corretamente é crucial para evitar problemas como corrupção de dados ou uploads incompletos. Além disso, o manuseio adequado de vários tipos e tamanhos de arquivos pode evitar erros inesperados. O tratamento adequado de erros e o feedback do usuário, como alertas, também são importantes para orientar o usuário durante o processo de upload de arquivos e informá-lo se algo der errado.

1. Qual é o propósito de usar em uploads de arquivos?
2. O 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 atributo no campo de entrada. Além disso, valide o conteúdo do arquivo no lado do servidor.
5. Qual é o significado do evento em ?
6. O 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 ao enviar dados do arquivo?
10. 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 método play no script de back-end?
16. O é 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.

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.