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

Lucas Simon

četvrtak, 16. svibnja 2024. u 23:47:04

Izrada obrasca za kontakt s privicima datoteka
Stvaranje obrasca za kontakt u Reactu koji korisnicima omogućuje slanje e-pošte s privicima datoteka može biti izazovno, osobito kada se integriraju usluge trećih strana kao što je Resend. Osiguravanje ispravnog postavljanja i rukovanja učitavanjem datoteka ključno je za izbjegavanje pogrešaka.
Ovaj vodič će vas provesti kroz postavljanje obrasca za kontakt korištenjem React i Resend, rješavajući uobičajene probleme kao što su rukovanje privicima datoteka i otklanjanje pogrešaka poslužitelja. Slijedeći ove korake, moći ćete neometano slati e-poštu s privicima.

Naredba Opis

Resend.emails.send() Šalje e-poštu s navedenim parametrima uključujući pošiljatelja, primatelja, predmet, html i privitke.

setHeader() Postavlja zaglavlje odgovora s navedenim parametrima. Ovdje se koristi za dopuštanje samo metode 'POST'.

FileReader() Čita sadržaj datoteke asinkrono. Ovdje se koristi za pretvaranje datoteke u base64 niz.

readAsDataURL() Metoda FileReadera za čitanje datoteke kao base64 kodiranog niza.

onload() Rukovatelj događajima za FileReader koji se pokreće kada se završi operacija čitanja datoteke.

split() Rastavlja niz u niz podnizova. Ovdje se koristi za odvajanje base64 sadržaja od podatkovnog URL prefiksa.

JSON.stringify() Pretvara JavaScript objekt ili vrijednost u JSON niz.

Naredba	Opis
Resend.emails.send()	Šalje e-poštu s navedenim parametrima uključujući pošiljatelja, primatelja, predmet, html i privitke.
setHeader()	Postavlja zaglavlje odgovora s navedenim parametrima. Ovdje se koristi za dopuštanje samo metode 'POST'.
FileReader()	Čita sadržaj datoteke asinkrono. Ovdje se koristi za pretvaranje datoteke u base64 niz.
readAsDataURL()	Metoda FileReadera za čitanje datoteke kao base64 kodiranog niza.
onload()	Rukovatelj događajima za FileReader koji se pokreće kada se završi operacija čitanja datoteke.
split()	Rastavlja niz u niz podnizova. Ovdje se koristi za odvajanje base64 sadržaja od podatkovnog URL prefiksa.
JSON.stringify()	Pretvara JavaScript objekt ili vrijednost u JSON niz.

Implementacija privitka e-pošte u React obrascu za kontakt

Pozadinska skripta kreirana je korištenjem Next.js API ruta i biblioteke Ponovno slanje za slanje e-pošte s privicima. Ključna funkcija, , koristi se za slanje e-pošte. Ova funkcija uzima parametre kao što su , , subject, , i . The parametar uključuje sadržaj datoteke i naziv datoteke. Skripta počinje uvozom potrebnih modula i inicijalizira instancu Resend koristeći API ključ pohranjen u varijablama okruženja. Funkcija obrađuje samo POST zahtjeva, slanje e-pošte i vraćanje ID-a e-pošte po uspjehu. Ako metoda nije , postavlja zaglavlje odgovora na dopušteno samo traži i vraća status 405.

Na sučelju se stvara React komponenta za rukovanje obrascem za kontakt. Komponenta održava stanje za sadržaj datoteke i naziv datoteke pomoću React-a kuka. Kada je datoteka odabrana, a objekt čita sadržaj datoteke kao base64 kodirani niz. Sadržaj i naziv datoteke pohranjeni su u stanju komponente. Prilikom podnošenja obrasca, asinkrona funkcija šalje a zahtjev pozadinskom API-ju s base64 kodiranim sadržajem datoteke i nazivom datoteke. Zaglavlja zahtjeva postavljena su na application/json a tijelo zahtjeva sadrži podatke datoteke. Ako je e-pošta uspješno poslana, prikazuje se upozorenje; inače se prikazuje upozorenje o pogrešci.

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;

Rukovanje učitavanjem datoteka u React obrascima

Kada se radi o učitavanju datoteka u React obrascima, bitno je osigurati ispravno rukovanje čitanjem datoteka i kodiranjem podataka. Koristiti API u JavaScriptu omogućuje nam asinkrono čitanje sadržaja datoteka, pretvarajući ih u base64 kodirani niz, koji je neophodan za slanje podataka datoteke putem HTTP-a. Ovaj kodirani niz može se jednostavno prenijeti kao dio tijela zahtjeva prilikom upućivanja API poziva.

Osiguravanje ispravnog čitanja i kodiranja podataka datoteke ključno je za izbjegavanje problema kao što su oštećenje podataka ili nepotpuni prijenosi. Osim toga, pravilno rukovanje različitim vrstama i veličinama datoteka može spriječiti neočekivane pogreške. Ispravno rukovanje pogreškama i povratne informacije korisnika, kao što su upozorenja, također su važni za vođenje korisnika kroz proces učitavanja datoteke i za obavještavanje ako nešto pođe po zlu.

Koja je svrha korištenja u učitavanju datoteka?
The API se koristi za asinkrono čitanje sadržaja datoteka i njihovo kodiranje kao base64 niz za prijenos u HTTP zahtjevima.
Kako mogu osigurati da su moji prijenosi datoteka sigurni?
Uvjerite se da su samo određene vrste datoteka prihvaćene korištenjem atribut u polju za unos. Dodatno, potvrdite sadržaj datoteke na strani poslužitelja.
Koji je značaj događaj u ?
The 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.
Kako mogu rukovati velikim datotekama u Reactu?
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.
Zašto trebam koristiti prilikom slanja podataka datoteke?
pretvara JavaScript objekt koji sadrži podatke datoteke u JSON niz, što je potreban format za tijelo zahtjeva u API pozivima.
Što označava 500 (interna pogreška poslužitelja) prilikom slanja e-pošte?
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.
Kako mogu ispraviti grešku 500 u svojim API pozivima?
Provjerite zapisnike poslužitelja za detaljne poruke o pogreškama i osigurajte da su krajnja točka API-ja i nosivost zahtjeva ispravno konfigurirani.
Koju ulogu ima reprodukcija metode u pozadinskoj skripti?
The koristi se za postavljanje zaglavlja HTTP odgovora, navodeći dopuštene HTTP metode (npr. 'POST').
Kako mogu pružiti korisničke povratne informacije tijekom učitavanja datoteka?
Upotrijebite poruke upozorenja, trake napretka ili indikatore statusa da obavijestite korisnike o statusu učitavanja i eventualnim pogreškama na koje naiđete.
Mogu li učitati više datoteka odjednom s ovom postavkom?
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.

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.