Průvodce posíláním e-mailů s přílohami v Reactu

Backendový skript pro odeslání e-mailu s přílohou pomocí opětovného odeslání

Backendový skript v Next.js s Resend

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;

Komponenta frontend pro kontaktní formulář s přílohou souboru

Frontend komponenta v 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;

Běžné otázky a odpovědi týkající se odesílání e-mailů s přílohami v Reactu

1. Jaký je účel použití FileReader v nahrávání souborů?
2. The FileReader API se používá k asynchronnímu čtení obsahu souborů a jejich kódování jako base64 řetězec pro přenos v HTTP požadavcích.
3. Jak mohu zajistit, aby moje nahrané soubory byly bezpečné?
4. Ujistěte se, že jsou přijímány pouze určité typy souborů pomocí accept atribut ve vstupním poli. Navíc ověřte obsah souboru na straně serveru.
5. Jaký je význam onload událost v FileReader?
6. The onload událost se spustí po dokončení operace čtení souboru, což vám umožní přistupovat k obsahu souboru a provádět další akce.
7. Jak mohu zpracovat velké soubory v Reactu?
8. U velkých souborů zvažte implementaci odesílání po částech, abyste se vyhnuli omezením paměti prohlížeče a poskytli uživateli zpětnou vazbu o průběhu.
9. Proč potřebuji používat JSON.stringify při odesílání dat souboru?
10. JSON.stringify převede objekt JavaScriptu obsahující data souboru na řetězec JSON, což je požadovaný formát pro tělo požadavku ve voláních API.
11. Co znamená 500 (interní chyba serveru) při odesílání e-mailů?
12. Chyba 500 obvykle označuje problém na straně serveru, jako je nesprávná konfigurace koncového bodu API nebo problémy se službou odesílání e-mailů.
13. Jak mohu odladit chybu 500 v mých voláních API?
14. Zkontrolujte protokoly serveru pro podrobné chybové zprávy a ujistěte se, že koncový bod API a datová část požadavku jsou správně nakonfigurovány.
15. Jakou roli hraje res.setHeader metoda přehrávání v backend skriptu?
16. The res.setHeader metoda se používá k nastavení hlavičky odpovědi HTTP, která určuje povolené metody HTTP (např. 'POST').
17. Jak mohu poskytnout zpětnou vazbu uživatelům během nahrávání souborů?
18. Použijte varovné zprávy, indikátory průběhu nebo stavové indikátory k informování uživatelů o stavu nahrávání a případných chybách.
19. Mohu s tímto nastavením nahrát více souborů najednou?
20. Toto nastavení zpracovává nahrávání jednoho souboru. Pro více souborů musíte upravit kód tak, aby zpracovával pole dat souboru a odeslat je v požadavku API.

Závěrečné úvahy o kontaktních formulářích React

Implementace příloh souborů v kontaktním formuláři React pomocí Resend zahrnuje konfiguraci front-end i back-end. Front-end se stará o výběr souborů, čtení a kódování do base64, zatímco back-end spravuje odeslání e-mailu s přílohou pomocí Resend API. Správné zpracování chyb a mechanismy zpětné vazby od uživatelů jsou klíčové pro bezproblémovou uživatelskou zkušenost. Dodržování osvědčených postupů a zajištění správnosti všech konfigurací může pomoci vyhnout se běžným nástrahám, jako jsou chyby serveru.