Vodnik za pošiljanje e-pošte s prilogami v React

Ustvarjanje kontaktnega obrazca s priponkami datotek

Ustvarjanje kontaktnega obrazca v Reactu, ki uporabnikom omogoča pošiljanje e-pošte s priponkami datotek, je lahko izziv, zlasti pri integraciji storitev tretjih oseb, kot je Resend. Zagotavljanje pravilne nastavitve in ravnanja z nalaganjem datotek je ključnega pomena, da se izognete napakam.

Ta vodnik vas bo vodil skozi nastavitev kontaktnega obrazca z uporabo React in Resend ter obravnaval pogoste težave, kot je obravnavanje datotečnih prilog in odpravljanje napak strežnika. Če sledite tem korakom, boste lahko nemoteno pošiljali e-pošto s prilogami.

Ukaz	Opis
Resend.emails.send()	Pošlje e-poštno sporočilo z določenimi parametri, vključno z od, do, zadevo, html in prilogami.
setHeader()	Nastavi glavo odgovora z določenimi parametri. Tukaj se uporablja za dovoljenje samo metode »POST«.
FileReader()	Asinhrono prebere vsebino datoteke. Tukaj se uporablja za pretvorbo datoteke v niz base64.
readAsDataURL()	Metoda FileReaderja za branje datoteke kot niza, kodiranega base64.
onload()	Obravnavalec dogodkov za FileReader, ki se sproži, ko je operacija branja datoteke končana.
split()	Razdeli niz v matriko podnizov. Tukaj se uporablja za ločevanje vsebine base64 od predpone podatkovnega URL-ja.
JSON.stringify()	Pretvori objekt JavaScript ali vrednost v niz JSON.

Implementacija e-poštne priloge v kontaktnem obrazcu React

Zaledni skript je ustvarjen z uporabo poti API-ja Next.js in knjižnice Resend za pošiljanje e-pošte s prilogami. Ključna funkcija, , se uporablja za pošiljanje e-pošte. Ta funkcija sprejme parametre, kot so , , subject, , in . The parameter vključuje vsebino datoteke in ime datoteke. Skript se začne z uvozom potrebnih modulov in inicializira primerek Resend z uporabo ključa API, shranjenega v spremenljivkah okolja. Funkcija obravnava samo POST zahteve, pošiljanje e-pošte in vrnitev e-poštnega ID-ja ob uspehu. Če metoda ni , nastavi glavo odgovora tako, da dovoljuje samo zahteva in vrne status 405.

Na sprednjem delu je ustvarjena komponenta React za obdelavo kontaktnega obrazca. Komponenta vzdržuje stanje za vsebino datoteke in ime datoteke z uporabo React's kavelj. Ko je datoteka izbrana, a objekt prebere vsebino datoteke kot base64 kodiran niz. Vsebina in ime datoteke sta shranjena v stanju komponente. Ob oddaji obrazca asinhrona funkcija pošlje a zahteva za zaledni API z vsebino in imenom datoteke, kodirane base64. Glave zahtev so nastavljene na application/json in telo zahteve vsebuje podatke datoteke. Če je e-poštno sporočilo uspešno poslano, se prikaže opozorilo; sicer se prikaže opozorilo o napaki.

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;

Ravnanje z nalaganjem datotek v React Forms

Ko se ukvarjate z nalaganjem datotek v obrazcih React, je bistveno zagotoviti pravilno ravnanje z branjem datotek in kodiranjem podatkov. Uporabljati API v JavaScriptu nam omogoča asinhrono branje vsebine datotek in jih pretvori v kodiran niz base64, ki je potreben za pošiljanje podatkov datoteke prek HTTP. Ta kodirani niz je mogoče preprosto prenesti kot del telesa zahteve pri izvajanju klicev API.

Zagotavljanje, da so podatki datoteke pravilno prebrani in kodirani, je ključnega pomena, da se izognete težavam, kot so poškodbe podatkov ali nepopolna nalaganja. Poleg tega lahko ustrezno ravnanje z različnimi vrstami in velikostmi datotek prepreči nepričakovane napake. Pravilno obravnavanje napak in povratne informacije uporabnikov, kot so opozorila, so prav tako pomembni za vodenje uporabnika skozi postopek nalaganja datoteke in za obveščanje, če gre kaj narobe.

1. Kakšen je namen uporabe pri nalaganju datotek?
2. The API se uporablja za asinhrono branje vsebine datotek in njihovo kodiranje kot niz base64 za prenos v zahtevah HTTP.
3. Kako lahko zagotovim, da so moje naložene datoteke varne?
4. Prepričajte se, da so sprejete samo določene vrste datotek z uporabo atribut v vnosno polje. Poleg tega preverite vsebino datoteke na strani strežnika.
5. Kakšen je pomen dogodek v ?
6. The dogodek se sproži, ko je operacija branja datoteke končana, kar vam omogoča dostop do vsebine datoteke in izvajanje nadaljnjih dejanj.
7. Kako lahko ravnam z velikimi datotekami v Reactu?
8. Za velike datoteke razmislite o izvajanju nalaganja datotek v kosih, da se izognete omejitvam pomnilnika brskalnika in uporabniku zagotovite povratne informacije o napredku.
9. Zakaj moram uporabljati pri pošiljanju podatkov datoteke?
10. pretvori objekt JavaScript, ki vsebuje podatke datoteke, v niz JSON, ki je zahtevana oblika za telo zahteve v klicih API-ja.
11. Kaj pomeni 500 (notranja napaka strežnika) pri pošiljanju e-pošte?
12. Napaka 500 običajno označuje težavo na strani strežnika, kot je nepravilna konfiguracija končne točke API-ja ali težave v storitvi pošiljanja e-pošte.
13. Kako lahko odpravim napako 500 v klicih API-ja?
14. Preverite dnevnike strežnika za podrobna sporočila o napakah in zagotovite, da sta končna točka API in koristni tovor zahteve pravilno konfigurirana.
15. Kakšno vlogo ima predvajanje metode v zalednem skriptu?
16. The metoda se uporablja za nastavitev glave odgovora HTTP, pri čemer se določijo dovoljene metode HTTP (npr. 'POST').
17. Kako lahko med nalaganjem datotek zagotovim povratne informacije uporabnikov?
18. Uporabite opozorilna sporočila, vrstice napredka ali indikatorje stanja, da uporabnike obvestite o statusu nalaganja in morebitnih napakah.
19. Ali lahko s to nastavitvijo naložim več datotek hkrati?
20. Ta nastavitev obravnava nalaganje posamezne datoteke. Za več datotek morate spremeniti kodo za obdelavo nizov podatkov o datotekah in jih poslati v zahtevi API.

Implementacija datotečnih prilog v kontaktnem obrazcu React z uporabo Resend vključuje tako sprednje kot zadnje konfiguracije. Sprednji del obravnava izbiro datotek, branje in kodiranje v base64, medtem ko zadnji del upravlja pošiljanje e-pošte s prilogo z API-jem Resend. Ustrezno obravnavanje napak in mehanizmi povratnih informacij uporabnikov so ključnega pomena za brezhibno uporabniško izkušnjo. Če upoštevate najboljše prakse in zagotovite, da so vse konfiguracije pravilne, se lahko izognete pogostim pastem, kot so napake strežnika.