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

Susisiekimo formos su failų priedais kūrimas

Sukurti „React“ kontaktinę formą, kuri leistų vartotojams siųsti el. laiškus su failų priedais, gali būti sudėtinga, ypač integruojant trečiųjų šalių paslaugas, pvz., „Resend“. Norint išvengti klaidų, labai svarbu užtikrinti tinkamą failų įkėlimo sąranką ir tvarkymą.

Šiame vadove bus paaiškinta, kaip nustatyti kontaktinę formą naudojant „Reaguoti“ ir „Siųsti iš naujo“, sprendžiant įprastas problemas, tokias kaip failų priedų tvarkymas ir serverio klaidų derinimas. Atlikę šiuos veiksmus galėsite sklandžiai siųsti el. laiškus su priedais.

komandą	apibūdinimas
Resend.emails.send()	Siunčia el. laišką su nurodytais parametrais, įskaitant nuo, į, temą, html ir priedus.
setHeader()	Nustato atsakymo antraštę su nurodytais parametrais. Naudojamas čia norint leisti tik „POST“ metodą.
FileReader()	Asinchroniškai skaito failo turinį. Naudojamas čia konvertuoti failą į base64 eilutę.
readAsDataURL()	„FileReader“ metodas nuskaityti failą kaip „base64“ užkoduotą eilutę.
onload()	„FileReader“ įvykių tvarkytuvas, kuris suaktyvinamas, kai failo skaitymo operacija baigta.
split()	Padalija eilutę į eilučių masyvą. Čia naudojamas atskirti base64 turinį nuo duomenų URL priešdėlio.
JSON.stringify()	Konvertuoja „JavaScript“ objektą arba reikšmę į JSON eilutę.

El. pašto priedo diegimas „React“ kontaktų formoje

Užpakalinės programos scenarijus sukuriamas naudojant Next.js API maršrutus ir biblioteką „Resend“, kad būtų galima siųsti el. laiškus su priedais. Pagrindinė funkcija, , naudojamas el. laiškui siųsti. Ši funkcija paima tokius parametrus kaip , , subject, , ir . The parametras apima failo turinį ir failo pavadinimą. Scenarijus pradedamas importuojant reikalingus modulius ir inicijuojamas pakartotinio siuntimo egzempliorius naudojant API raktą, saugomą aplinkos kintamuosiuose. Tik funkcijos rankenos POST užklausas, išsiųsti el. laišką ir grąžinti el. pašto ID sėkmingai. Jei metodas nėra , ji nustato atsakymo antraštę, kad būtų leidžiama tik pateikia užklausas ir grąžina 405 būseną.

Priekinėje dalyje sukurtas „React“ komponentas, skirtas tvarkyti kontaktinę formą. Komponentas palaiko failo turinio ir failo pavadinimo būseną naudodamas „React“. kabliukas. Kai pasirenkamas failas, a objektas nuskaito failo turinį kaip base64 koduotą eilutę. Failo turinys ir pavadinimas išsaugomi komponento būsenoje. Pateikus formą, asinchroninė funkcija siunčia a užklausa užpakalinei API su base64 koduotu failo turiniu ir failo pavadinimu. Užklausų antraštės nustatytos į application/json o užklausos organe yra failo duomenys. Jei el. laiškas sėkmingai išsiųstas, rodomas įspėjimas; kitu atveju rodomas klaidos įspėjimas.

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;

Failų įkėlimų tvarkymas reakcijos formose

Kai kalbate apie failų įkėlimą į „React“ formas, labai svarbu užtikrinti teisingą failų skaitymo ir duomenų kodavimo tvarkymą. Naudojant API JavaScript leidžia mums asinchroniškai skaityti failų turinį, konvertuojant juos į base64 koduotą eilutę, kuri reikalinga failo duomenims siųsti HTTP. Šią užkoduotą eilutę galima lengvai perduoti kaip užklausos dalį, kai skambinama API.

Labai svarbu užtikrinti, kad failo duomenys būtų teisingai nuskaityti ir užkoduoti, kad būtų išvengta tokių problemų, kaip duomenų sugadinimas arba nebaigti įkėlimai. Be to, tinkamai tvarkant įvairius failų tipus ir dydžius galima išvengti netikėtų klaidų. Tinkamas klaidų tvarkymas ir naudotojų atsiliepimai, pvz., įspėjimai, taip pat yra svarbūs siekiant padėti vartotojui įkelti failą ir informuoti, jei kas nors negerai.

1. Koks yra naudojimo tikslas įkeliant failus?
2. The 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 atributas įvesties lauke. Be to, patvirtinkite failo turinį serverio pusėje.
5. Kokią reikšmę turi įvykis ?
6. The į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 siunčiant failo duomenis?
10. 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 metodas žaisti backend scenarijus?
16. The 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.

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ų.