Vodič za slanje e-pošte s privicima u Reactu

Pozadinska skripta za slanje e-pošte s privitkom pomoću opcije Ponovno slanje

Pozadinska skripta u Next.js s ponovnim slanjem

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 sučelja za obrazac za kontakt s privitkom datoteke

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

Uobičajena pitanja i odgovori o slanju e-pošte s privicima u Reactu

1. Koja je svrha korištenja FileReader u učitavanju datoteka?
2. The FileReader API se koristi za asinkrono čitanje sadržaja datoteka i njihovo kodiranje kao base64 niz za prijenos u HTTP zahtjevima.
3. Kako mogu osigurati da su moji prijenosi datoteka sigurni?
4. Uvjerite se da su samo određene vrste datoteka prihvaćene korištenjem accept atribut u polju za unos. Dodatno, potvrdite sadržaj datoteke na strani poslužitelja.
5. Koji je značaj onload događaj u FileReader?
6. The onload događaj se pokreće kada je operacija čitanja datoteke dovršena, što vam omogućuje pristup sadržaju datoteke i izvođenje daljnjih radnji.
7. Kako mogu rukovati velikim datotekama u Reactu?
8. Za velike datoteke razmislite o implementaciji prijenosa datoteka u komadima kako biste izbjegli ograničenja memorije preglednika i kako biste korisniku pružili povratne informacije o napretku.
9. Zašto trebam koristiti JSON.stringify prilikom slanja podataka datoteke?
10. JSON.stringify pretvara JavaScript objekt koji sadrži podatke datoteke u JSON niz, što je potreban format za tijelo zahtjeva u API pozivima.
11. Što označava 500 (interna pogreška poslužitelja) prilikom slanja e-pošte?
12. Pogreška 500 obično ukazuje na problem na strani poslužitelja, kao što je netočna konfiguracija krajnje točke API-ja ili problemi unutar usluge slanja e-pošte.
13. Kako mogu ispraviti grešku 500 u svojim API pozivima?
14. Provjerite zapisnike poslužitelja za detaljne poruke o pogreškama i osigurajte da su krajnja točka API-ja i nosivost zahtjeva ispravno konfigurirani.
15. Koju ulogu ima res.setHeader reprodukcija metode u pozadinskoj skripti?
16. The res.setHeader koristi se za postavljanje zaglavlja HTTP odgovora, navodeći dopuštene HTTP metode (npr. 'POST').
17. Kako mogu pružiti korisničke povratne informacije tijekom učitavanja datoteka?
18. Upotrijebite poruke upozorenja, trake napretka ili indikatore statusa da obavijestite korisnike o statusu učitavanja i eventualnim pogreškama na koje naiđete.
19. Mogu li učitati više datoteka odjednom s ovom postavkom?
20. Ova postavka upravlja prijenosom pojedinačnih datoteka. Za više datoteka morate modificirati kod za rukovanje nizovima podataka datoteka i poslati ih u API zahtjevu.

Završne misli o React obrascima za kontakt

Implementacija datotečnih privitaka u React obrascu za kontakt pomoću Resend-a uključuje konfiguracije front-end i back-end. Prednji dio upravlja odabirom datoteke, čitanjem i kodiranjem u base64, dok stražnji dio upravlja slanjem e-pošte s privitkom pomoću API-ja Resend. Ispravno postupanje s pogreškama i mehanizmi povratnih informacija korisnika ključni su za besprijekorno korisničko iskustvo. Praćenje najboljih praksi i osiguravanje da su sve konfiguracije ispravne mogu pomoći u izbjegavanju uobičajenih zamki kao što su pogreške poslužitelja.