Ghid pentru trimiterea de e-mailuri cu atașamente în React

Crearea unui formular de contact cu fișiere atașate

Crearea unui formular de contact în React care le permite utilizatorilor să trimită e-mailuri cu fișiere atașate poate fi o provocare, mai ales atunci când se integrează servicii terță parte, cum ar fi Resend. Asigurarea configurării și gestionării corecte a fișierelor încărcate este crucială pentru a evita erorile.

Acest ghid vă va ghida prin configurarea unui formular de contact folosind React and Resend, abordând probleme comune, cum ar fi gestionarea atașamentelor de fișiere și depanarea erorilor de server. Urmând acești pași, veți putea trimite e-mailuri cu atașamente fără probleme.

Comanda	Descriere
Resend.emails.send()	Trimite un e-mail cu parametri specificați, inclusiv de la, către, subiect, html și atașamente.
setHeader()	Setează antetul răspunsului cu parametri specificați. Folosit aici pentru a permite numai metoda „POST”.
FileReader()	Citește conținutul unui fișier în mod asincron. Folosit aici pentru a converti fișierul într-un șir base64.
readAsDataURL()	Metoda FileReader pentru a citi fișierul ca șir codificat base64.
onload()	Manager de evenimente pentru FileReader care este declanșat când operațiunea de citire a fișierului este finalizată.
split()	Împarte un șir într-o matrice de subșiruri. Folosit aici pentru a separa conținutul base64 de prefixul URL al datelor.
JSON.stringify()	Convertește un obiect sau o valoare JavaScript într-un șir JSON.

Implementarea atașamentului de e-mail în formularul de contact React

Scriptul backend este creat folosind rutele API Next.js și biblioteca Retrimitere pentru a trimite e-mailuri cu atașamente. Funcția cheie, , este folosit pentru a trimite e-mailul. Această funcție preia parametri precum , , subject, , și . The parametrul include conținutul fișierului și numele fișierului. Scriptul începe prin importul modulelor necesare și inițializează instanța Retrimitere folosind o cheie API stocată în variabilele de mediu. Funcția gestionează numai POST solicitări, trimiterea e-mailului și returnarea ID-ului de e-mail la succes. Dacă metoda nu este , setează antetul răspunsului să permită numai solicită și returnează un status 405.

Pe front-end, o componentă React este creată pentru a gestiona formularul de contact. Componenta menține starea pentru conținutul fișierului și numele fișierului folosind React cârlig. Când este selectat un fișier, a obiectul citește conținutul fișierului ca șir codificat base64. Conținutul și numele fișierului sunt stocate în starea componentei. La trimiterea formularului, o funcție asincronă trimite a cerere către API-ul backend cu conținutul și numele fișierului codificat în base64. Antetele cererii sunt setate la application/json iar corpul cererii conține datele fișierului. Dacă e-mailul este trimis cu succes, este afișată o alertă; în caz contrar, este afișată o alertă de eroare.

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;

Gestionarea încărcărilor de fișiere în formularele React

Când aveți de-a face cu încărcările de fișiere în formularele React, este esențial să vă asigurați gestionarea corectă a citirii fișierelor și a codificării datelor. Folosind API-ul în JavaScript ne permite să citim conținutul fișierelor în mod asincron, transformându-le într-un șir codificat base64, care este necesar pentru trimiterea datelor fișierelor prin HTTP. Acest șir codificat poate fi transmis cu ușurință ca parte a corpului solicitării atunci când se efectuează apeluri API.

Asigurarea că datele fișierului sunt citite și codificate corect este crucială pentru a evita probleme precum coruperea datelor sau încărcările incomplete. În plus, gestionarea adecvată a diferitelor tipuri și dimensiuni de fișiere poate preveni erorile neașteptate. Gestionarea corectă a erorilor și feedbackul utilizatorului, cum ar fi alertele, sunt, de asemenea, importante pentru a ghida utilizatorul prin procesul de încărcare a fișierelor și pentru a-l informa dacă ceva nu merge bine.

1. Care este scopul utilizării în încărcările de fișiere?
2. The API-ul este folosit pentru a citi conținutul fișierelor în mod asincron și pentru a le codifica ca șir de caractere base64 pentru transmiterea în solicitările HTTP.
3. Cum mă pot asigura că încărcările fișierelor mele sunt sigure?
4. Asigurați-vă că sunt acceptate numai anumite tipuri de fișiere utilizând fișierul atribut în câmpul de intrare. În plus, validați conținutul fișierului de pe partea serverului.
5. Care este semnificația eveniment în ?
6. The evenimentul este declanșat când operația de citire a fișierului este finalizată, permițându-vă să accesați conținutul fișierului și să efectuați acțiuni suplimentare.
7. Cum pot gestiona fișierele mari în React?
8. Pentru fișierele mari, luați în considerare implementarea încărcărilor de fișiere în bloc pentru a evita limitările de memorie ale browserului și pentru a oferi utilizatorului feedback despre progres.
9. De ce trebuie să folosesc când trimiteți datele fișierului?
10. convertește obiectul JavaScript care conține datele fișierului într-un șir JSON, care este formatul necesar pentru corpul solicitării în apelurile API.
11. Ce indică un 500 (Eroare internă a serverului) atunci când trimiteți e-mailuri?
12. O eroare 500 indică de obicei o problemă la nivelul serverului, cum ar fi configurarea incorectă a punctului final API sau probleme în cadrul serviciului de trimitere a e-mailurilor.
13. Cum pot depana o eroare 500 în apelurile mele API?
14. Verificați jurnalele serverului pentru mesaje de eroare detaliate și asigurați-vă că punctul final API și sarcina utilă de solicitare sunt configurate corect.
15. Ce rol are metoda de redare în scriptul backend?
16. The metoda este utilizată pentru a seta antetul răspunsului HTTP, specificând metodele HTTP permise (de exemplu, „POST”).
17. Cum pot oferi feedback utilizatorilor în timpul încărcării fișierelor?
18. Utilizați mesaje de alertă, bare de progres sau indicatori de stare pentru a informa utilizatorii despre starea încărcării și despre orice erori întâlnite.
19. Pot încărca mai multe fișiere simultan cu această configurare?
20. Această configurare se ocupă de încărcarea unui singur fișier. Pentru mai multe fișiere, trebuie să modificați codul pentru a gestiona matrice de date de fișier și să le trimiteți în cererea API.

Implementarea fișierelor atașate într-un formular de contact React folosind Resend implică atât configurații front-end, cât și back-end. Front-end-ul se ocupă de selectarea fișierelor, citirea și codificarea în base64, în timp ce back-end-ul gestionează trimiterea e-mailului cu atașamentul folosind API-ul Resend. Gestionarea corectă a erorilor și mecanismele de feedback ale utilizatorilor sunt esențiale pentru o experiență de utilizator fără întreruperi. Respectarea celor mai bune practici și asigurarea faptului că toate configurațiile sunt corecte poate ajuta la evitarea capcanelor comune, cum ar fi erorile de server.