Panduan Mengirim Email dengan Lampiran di React

Skrip Backend untuk Mengirim Email dengan Lampiran menggunakan Kirim Ulang

Skrip backend di Next.js dengan Kirim Ulang

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;

Komponen Frontend untuk Formulir Kontak dengan Lampiran File

Komponen frontend di 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;

Pertanyaan dan Jawaban Umum tentang Mengirim Email dengan Lampiran di React

1. Apa tujuan penggunaan FileReader dalam unggahan file?
2. Itu FileReader API digunakan untuk membaca konten file secara asinkron dan menyandikannya sebagai string base64 untuk transmisi dalam permintaan HTTP.
3. Bagaimana cara memastikan unggahan file saya aman?
4. Pastikan hanya jenis file tertentu yang diterima dengan menggunakan accept atribut di kolom input. Selain itu, validasi konten file di sisi server.
5. Apa pentingnya onload acara di FileReader?
6. Itu onload acara dipicu ketika operasi pembacaan file selesai, memungkinkan Anda mengakses konten file dan melakukan tindakan lebih lanjut.
7. Bagaimana saya bisa menangani file besar di React?
8. Untuk file besar, pertimbangkan untuk menerapkan unggahan file terpotong untuk menghindari keterbatasan memori browser dan untuk memberikan umpan balik kemajuan kepada pengguna.
9. Mengapa saya perlu menggunakan JSON.stringify saat mengirim data file?
10. JSON.stringify mengonversi objek JavaScript yang berisi data file menjadi string JSON, yang merupakan format yang diperlukan untuk isi permintaan dalam panggilan API.
11. Apa yang ditunjukkan oleh angka 500 (Kesalahan Server Internal) saat mengirim email?
12. Kesalahan 500 biasanya menunjukkan masalah sisi server, seperti konfigurasi titik akhir API yang salah atau masalah dalam layanan pengiriman email.
13. Bagaimana cara men-debug kesalahan 500 dalam panggilan API saya?
14. Periksa log server untuk pesan kesalahan terperinci dan pastikan bahwa titik akhir API dan muatan permintaan dikonfigurasi dengan benar.
15. Peran apa yang dilakukannya res.setHeader metode bermain di skrip backend?
16. Itu res.setHeader metode digunakan untuk mengatur header respons HTTP, menentukan metode HTTP yang diizinkan (misalnya, 'POST').
17. Bagaimana cara memberikan masukan kepada pengguna selama pengunggahan file?
18. Gunakan pesan peringatan, bilah kemajuan, atau indikator status untuk memberi tahu pengguna tentang status unggahan dan kesalahan apa pun yang terjadi.
19. Bisakah saya mengunggah banyak file sekaligus dengan pengaturan ini?
20. Pengaturan ini menangani unggahan file tunggal. Untuk banyak file, Anda perlu memodifikasi kode untuk menangani array data file dan mengirimkannya dalam permintaan API.

Pemikiran Akhir tentang Formulir Kontak React

Menerapkan lampiran file dalam formulir kontak React menggunakan Kirim Ulang melibatkan konfigurasi front-end dan back-end. Front-end menangani pemilihan file, pembacaan, dan pengkodean ke base64, sedangkan back-end mengelola pengiriman email dengan lampiran menggunakan API Kirim Ulang. Penanganan kesalahan yang tepat dan mekanisme umpan balik pengguna sangat penting untuk pengalaman pengguna yang lancar. Mengikuti praktik terbaik dan memastikan semua konfigurasi sudah benar dapat membantu menghindari kesalahan umum seperti kesalahan server.