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

Backendový skript na odoslanie e-mailu s prílohou pomocou opätovného odoslania

Backendový skript v Next.js s opätovným odoslaním

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;

Frontendový komponent pre kontaktný formulár s prílohou súboru

Frontend komponent 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;

Bežné otázky a odpovede o odosielaní e-mailov s prílohami v React

1. Aký je účel použitia FileReader v nahrávaní súborov?
2. The FileReader 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 accept atribút vo vstupnom poli. Okrem toho overte obsah súboru na strane servera.
5. Aký je význam onload udalosť v FileReader?
6. The onload 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ť JSON.stringify pri odosielaní údajov súboru?
10. JSON.stringify 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 res.setHeader metóda hrať v backend skripte?
16. The res.setHeader 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.

Záverečné myšlienky o kontaktných formulároch React

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.