Sprievodca odosielaním e-mailov s prílohami v React

Vytvorenie kontaktného formulára s prílohami súborov

Vytvorenie kontaktného formulára v Reacte, ktorý umožňuje používateľom odosielať e-maily s prílohami súborov, môže byť náročné, najmä pri integrácii služieb tretích strán, ako je Resend. Aby sa predišlo chybám, je dôležité zabezpečiť správne nastavenie a spracovanie nahrávania súborov.

Táto príručka vás prevedie nastavením kontaktného formulára pomocou funkcie Reagovať a znova odoslať, pričom rieši bežné problémy, ako je spracovanie príloh súborov a ladenie chýb servera. Podľa týchto krokov budete môcť bez problémov odosielať e-maily s prílohami.

Príkaz	Popis
Resend.emails.send()	Odošle e-mail so špecifikovanými parametrami vrátane odosielateľa, do, predmetu, html a príloh.
setHeader()	Nastaví hlavičku odpovede so špecifikovanými parametrami. Používa sa na povolenie iba metódy „POST“.
FileReader()	Číta obsah súboru asynchrónne. Používa sa tu na konverziu súboru na reťazec base64.
readAsDataURL()	Metóda FileReader na čítanie súboru ako reťazec kódovaný base64.
onload()	Obsluha udalosti pre FileReader, ktorá sa spustí po dokončení operácie čítania súboru.
split()	Rozdelí reťazec na pole podreťazcov. Používa sa tu na oddelenie obsahu base64 od predpony adresy URL údajov.
JSON.stringify()	Skonvertuje objekt alebo hodnotu JavaScriptu na reťazec JSON.

Implementácia e-mailovej prílohy v kontaktnom formulári React

Backendový skript je vytvorený pomocou trás Next.js API a knižnice Resend na odosielanie e-mailov s prílohami. Kľúčová funkcia, , slúži na odoslanie e-mailu. Táto funkcia preberá parametre ako napr , , subject, , a . The parameter obsahuje obsah súboru a názov súboru. Skript začína importovaním potrebných modulov a inicializuje inštanciu Resend pomocou kľúča API uloženého v premenných prostredia. Funkcia ovláda iba POST žiadosti, odoslanie e-mailu a vrátenie ID e-mailu v prípade úspechu. Ak metóda nie je , nastaví hlavičku odpovede tak, aby bola povolená iba vyžiada a vráti stav 405.

Na frontende sa vytvorí komponent React na spracovanie kontaktného formulára. Komponent udržiava stav obsahu súboru a súboru pomocou React's háčik. Keď je vybraný súbor, a objekt číta obsah súboru ako reťazec zakódovaný v base64. Obsah a názov súboru sú uložené v stave komponentu. Pri odoslaní formulára asynchrónna funkcia odošle a požiadajte o backend API s obsahom súboru zakódovaného v base64 a názvom súboru. Hlavičky požiadaviek sú nastavené na application/json a telo požiadavky obsahuje údaje súboru. Ak je e-mail úspešne odoslaný, zobrazí sa upozornenie; v opačnom prípade sa zobrazí chybové hlásenie.

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;

Spracovanie nahrávania súborov vo formulároch React

Pri nahrávaní súborov vo formulároch React je dôležité zabezpečiť správne spracovanie čítania súborov a kódovania údajov. Pomocou API v JavaScripte nám umožňuje čítať obsah súborov asynchrónne, konvertovať ich na reťazec kódovaný base64, ktorý je potrebný na odosielanie údajov súboru cez HTTP. Tento zakódovaný reťazec možno jednoducho preniesť ako súčasť tela požiadavky pri volaní API.

Zabezpečenie správneho čítania a kódovania údajov súboru je kľúčové, aby sa predišlo problémom, ako je poškodenie údajov alebo neúplné nahrávanie. Okrem toho správna manipulácia s rôznymi typmi a veľkosťami súborov môže zabrániť neočakávaným chybám. Správne spracovanie chýb a spätná väzba od používateľov, ako sú napríklad upozornenia, sú tiež dôležité na to, aby používateľa previedli procesom nahrávania súboru a informovali ho, ak sa niečo pokazí.

1. Aký je účel použitia v nahrávaní súborov?
2. The API sa používa na asynchrónne čítanie obsahu súborov a ich kódovanie ako reťazec base64 na prenos v požiadavkách HTTP.
3. Ako môžem zabezpečiť, aby moje nahrávanie súborov bolo bezpečné?
4. Uistite sa, že sú akceptované iba špecifické typy súborov pomocou atribút vo vstupnom poli. Okrem toho overte obsah súboru na strane servera.
5. Aký je význam udalosť v ?
6. The udalosť sa spustí po dokončení operácie čítania súboru, čo vám umožní získať prístup k obsahu súboru a vykonať ďalšie akcie.
7. Ako môžem spracovať veľké súbory v Reacte?
8. V prípade veľkých súborov zvážte implementáciu odovzdávania kusov, aby ste sa vyhli obmedzeniam pamäte prehliadača a poskytli používateľovi spätnú väzbu o pokroku.
9. Prečo potrebujem použiť pri odosielaní údajov súboru?
10. konvertuje objekt JavaScript obsahujúci údaje súboru na reťazec JSON, čo je požadovaný formát pre telo požiadavky vo volaniach API.
11. Čo znamená 500 (interná chyba servera) pri odosielaní e-mailov?
12. Chyba 500 zvyčajne označuje problém na strane servera, ako je nesprávna konfigurácia koncového bodu API alebo problémy so službou odosielania e-mailov.
13. Ako môžem odladiť chybu 500 v mojich volaniach API?
14. Skontrolujte protokoly servera, či neobsahujú podrobné chybové hlásenia, a uistite sa, že koncový bod rozhrania API a obsah žiadosti sú správne nakonfigurované.
15. Akú úlohu zohráva metóda hrať v backend skripte?
16. The metóda sa používa na nastavenie hlavičky odpovede HTTP, ktorá špecifikuje povolené metódy HTTP (napr. „POST“).
17. Ako môžem poskytnúť spätnú väzbu používateľovi počas nahrávania súborov?
18. Na informovanie používateľov o stave nahrávania a prípadných chybách použite výstražné správy, indikátory priebehu alebo indikátory stavu.
19. Môžem s týmto nastavením nahrať viacero súborov naraz?
20. Toto nastavenie spracováva nahrávanie jedného súboru. V prípade viacerých súborov musíte upraviť kód tak, aby spracovával polia údajov o súboroch a odoslal ich v požiadavke API.

Implementácia súborových príloh v kontaktnom formulári React pomocou Resend zahŕňa konfigurácie front-end aj back-end. Front-end spracováva výber súborov, čítanie a kódovanie do base64, zatiaľ čo back-end spravuje odosielanie e-mailu s prílohou pomocou API Resend. Správne spracovanie chýb a mechanizmy spätnej väzby od používateľov sú kľúčové pre bezproblémovú používateľskú skúsenosť. Dodržiavanie osvedčených postupov a zaistenie správnosti všetkých konfigurácií môže pomôcť vyhnúť sa bežným nástrahám, ako sú chyby servera.