El. laiškų su priedais siuntimo „React“ vadovas

Užpakalinės programos scenarijus, skirtas siųsti el. laišką su priedu naudojant siuntimą iš naujo

Backend scenarijus Next.js su siuntimu iš naujo

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;

Priekinės dalies komponentas, skirtas kontaktinei formai su failo priedu

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

Dažni klausimai ir atsakymai apie el. laiškų su priedais siuntimą sistemoje „React“.

1. Koks yra naudojimo tikslas FileReader įkeliant failus?
2. The FileReader API naudojama asinchroniškai nuskaityti failų turinį ir užkoduoti juos kaip base64 eilutę, skirtą perduoti HTTP užklausose.
3. Kaip galiu užtikrinti, kad įkeliami failai būtų saugūs?
4. Įsitikinkite, kad priimami tik tam tikri failų tipai, naudodami accept atributas įvesties lauke. Be to, patvirtinkite failo turinį serverio pusėje.
5. Kokią reikšmę turi onload įvykis FileReader?
6. The onload įvykis suaktyvinamas, kai baigiama failo skaitymo operacija, todėl galite pasiekti failo turinį ir atlikti tolesnius veiksmus.
7. Kaip galiu tvarkyti didelius failus „React“?
8. Jei failai yra dideli, apsvarstykite galimybę įkelti suskirstytus failus, kad išvengtumėte naršyklės atminties apribojimų ir pateiktumėte vartotojui grįžtamąjį ryšį apie eigą.
9. Kodėl man reikia naudoti JSON.stringify siunčiant failo duomenis?
10. JSON.stringify konvertuoja JavaScript objektą, kuriame yra failo duomenys, į JSON eilutę, kuri yra reikalingas API iškvietimų užklausos turiniui formatas.
11. Ką rodo 500 (vidinė serverio klaida) siunčiant el.
12. Klaida 500 paprastai rodo serverio problemą, pvz., neteisingą API galutinio taško konfigūraciją arba el. pašto siuntimo paslaugos problemas.
13. Kaip galiu derinti 500 klaidą savo API skambučiuose?
14. Patikrinkite, ar serverio žurnaluose nėra išsamių klaidų pranešimų, ir įsitikinkite, kad API galutinis taškas ir užklausos naudingoji apkrova yra tinkamai sukonfigūruoti.
15. Kokį vaidmenį atlieka res.setHeader metodas žaisti backend scenarijus?
16. The res.setHeader metodas naudojamas HTTP atsako antraštei nustatyti, nurodant leidžiamus HTTP metodus (pvz., „POST“).
17. Kaip galiu pateikti naudotojų atsiliepimus įkeliant failus?
18. Naudokite įspėjimo pranešimus, eigos juostas arba būsenos indikatorius, kad informuotumėte vartotojus apie įkėlimo būseną ir visas pastebėtas klaidas.
19. Ar galiu įkelti kelis failus vienu metu naudojant šią sąranką?
20. Ši sąranka tvarko vieno failo įkėlimą. Jei norite naudoti kelis failus, turite modifikuoti kodą, kad galėtumėte tvarkyti failų duomenų masyvus ir siųsti juos API užklausoje.

Paskutinės mintys apie „React“ kontaktines formas

Failų priedų diegimas „React“ kontaktinėje formoje naudojant „Resend“ apima ir priekinę, ir galinę konfigūraciją. Priekinė dalis tvarko failų pasirinkimą, skaitymą ir kodavimą į base64, o užpakalinė dalis tvarko el. laiško su priedu siuntimą naudodama pakartotinio siuntimo API. Tinkamas klaidų tvarkymas ir naudotojų atsiliepimų mechanizmai yra labai svarbūs sklandžiam naudotojo patirčiai. Vadovaudamiesi geriausios praktikos pavyzdžiais ir užtikrindami, kad visos konfigūracijos yra teisingos, galite išvengti įprastų spąstų, pvz., serverio klaidų.