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

Script backend pentru a trimite e-mail cu atașament folosind Retrimitere

Script backend în Next.js cu Retrimitere

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;

Componentă front-end pentru formularul de contact cu fișier atașat

Componentă front-end în 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;

Întrebări și răspunsuri frecvente despre trimiterea de e-mailuri cu atașamente în React

1. Care este scopul utilizării FileReader în încărcările de fișiere?
2. The FileReader 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 accept atribut în câmpul de intrare. În plus, validați conținutul fișierului de pe partea serverului.
5. Care este semnificația onload eveniment în FileReader?
6. The onload 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 JSON.stringify când trimiteți datele fișierului?
10. JSON.stringify 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 res.setHeader metoda de redare în scriptul backend?
16. The res.setHeader 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.

Gânduri finale despre formularele de contact React

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.