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

Vytvoření kontaktního formuláře s přílohami souborů

Vytvoření kontaktního formuláře v Reactu, který uživatelům umožňuje posílat e-maily s přílohami souborů, může být náročné, zejména při integraci služeb třetích stran, jako je Resend. Zajištění správného nastavení a zpracování nahrávání souborů je zásadní, aby se předešlo chybám.

Tato příručka vás provede nastavením kontaktního formuláře pomocí React and Resend, řeší běžné problémy, jako je zpracování příloh souborů a ladění chyb serveru. Podle těchto kroků budete moci bezproblémově odesílat e-maily s přílohami.

Příkaz	Popis
Resend.emails.send()	Odešle e-mail se zadanými parametry včetně od, do, předmětu, html a příloh.
setHeader()	Nastaví hlavičku odpovědi se zadanými parametry. Zde se používá k povolení pouze metody 'POST'.
FileReader()	Čte obsah souboru asynchronně. Zde se používá k převodu souboru na řetězec base64.
readAsDataURL()	Metoda FileReaderu pro čtení souboru jako řetězce kódovaného base64.
onload()	Obslužná rutina události pro FileReader, která se spustí po dokončení operace čtení souboru.
split()	Rozdělí řetězec na pole podřetězců. Zde se používá k oddělení obsahu base64 od předpony URL dat.
JSON.stringify()	Převede objekt nebo hodnotu JavaScriptu na řetězec JSON.

Implementace e-mailové přílohy v kontaktním formuláři React

Backendový skript je vytvořen pomocí tras Next.js API a knihovny Resend pro odesílání e-mailů s přílohami. Klíčová funkce, , slouží k odeslání e-mailu. Tato funkce přebírá parametry jako např , , subject, , a . The Parametr obsahuje obsah souboru a název souboru. Skript začíná importem potřebných modulů a inicializuje instanci Resend pomocí klíče API uloženého v proměnných prostředí. Funkce pouze zpracovává POST žádosti, odeslání e-mailu a vrácení ID e-mailu v případě úspěchu. Pokud metoda není , nastaví hlavičku odpovědi tak, aby byla povolena pouze požaduje a vrací stav 405.

Na frontendu je vytvořena komponenta React pro zpracování kontaktního formuláře. Komponenta udržuje stav obsahu souboru a názvu souboru pomocí React's háček. Když je vybrán soubor, a objekt čte obsah souboru jako řetězec kódovaný base64. Obsah a název souboru jsou uloženy ve stavu komponenty. Při odeslání formuláře odešle asynchronní funkce a požadavek na backend API s obsahem souboru a názvem souboru zakódovaným v base64. Záhlaví požadavků jsou nastavena na application/json a tělo požadavku obsahuje data souboru. Pokud je e-mail úspěšně odeslán, zobrazí se upozornění; jinak se zobrazí chybové hlášení.

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;

Manipulace s nahráváním souborů ve formulářích React

Při nahrávání souborů ve formulářích React je nezbytné zajistit správné zpracování čtení souborů a kódování dat. Za použití API v JavaScriptu nám umožňuje číst obsah souborů asynchronně a převádět je na řetězec kódovaný base64, který je nezbytný pro odesílání dat souboru přes HTTP. Tento kódovaný řetězec lze snadno přenést jako součást těla požadavku při volání API.

Zajištění správného čtení a kódování dat souboru je zásadní, aby se předešlo problémům, jako je poškození dat nebo neúplné nahrávání. Kromě toho může správná manipulace s různými typy a velikostmi souborů zabránit neočekávaným chybám. Správné zpracování chyb a zpětná vazba od uživatelů, jako jsou výstrahy, jsou také důležité, aby uživatele provedly procesem nahrávání souboru a informovaly ho, pokud se něco pokazí.

1. Jaký je účel použití v nahrávání souborů?
2. The 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í atribut ve vstupním poli. Navíc ověřte obsah souboru na straně serveru.
5. Jaký je význam událost v ?
6. The 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 při odesílání dat souboru?
10. 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 metoda přehrávání v backend skriptu?
16. The 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.

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.