Panduan Mengirim Email dengan Lampiran di React

Membuat Formulir Kontak dengan Lampiran File

Membuat formulir kontak di React yang memungkinkan pengguna mengirim email dengan lampiran file dapat menjadi tantangan, terutama ketika mengintegrasikan layanan pihak ketiga seperti Kirim Ulang. Memastikan pengaturan dan penanganan unggahan file yang benar sangat penting untuk menghindari kesalahan.

Panduan ini akan memandu Anda dalam menyiapkan formulir kontak menggunakan React dan Kirim Ulang, mengatasi masalah umum seperti menangani lampiran file dan men-debug kesalahan server. Dengan mengikuti langkah-langkah ini, Anda akan dapat mengirim email dengan lampiran dengan lancar.

Memerintah	Keterangan
Resend.emails.send()	Mengirim email dengan parameter tertentu termasuk dari, ke, subjek, html, dan lampiran.
setHeader()	Menyetel header respons dengan parameter tertentu. Digunakan di sini untuk mengizinkan hanya metode 'POST'.
FileReader()	Membaca konten file secara asinkron. Digunakan di sini untuk mengonversi file menjadi string base64.
readAsDataURL()	Metode FileReader untuk membaca file sebagai string yang dikodekan base64.
onload()	Penangan peristiwa untuk FileReader yang dipicu ketika operasi pembacaan file selesai.
split()	Memisahkan string menjadi array substring. Digunakan di sini untuk memisahkan konten base64 dari awalan URL data.
JSON.stringify()	Mengonversi objek atau nilai JavaScript menjadi string JSON.

Menerapkan Lampiran Email di Formulir Kontak React

Skrip backend dibuat menggunakan rute API Next.js dan pustaka Kirim Ulang untuk mengirim email dengan lampiran. Fungsi kuncinya, , digunakan untuk mengirim email. Fungsi ini mengambil parameter seperti , , subject, , Dan . Itu parameter termasuk konten file dan nama file. Skrip dimulai dengan mengimpor modul yang diperlukan dan menginisialisasi instance Kirim Ulang menggunakan kunci API yang disimpan dalam variabel lingkungan. Fungsi ini hanya menangani POST permintaan, mengirim email dan mengembalikan ID email jika berhasil. Jika metodenya tidak , ini menyetel header respons agar hanya mengizinkan meminta dan mengembalikan status 405.

Di frontend, komponen React dibuat untuk menangani formulir kontak. Komponen mempertahankan status untuk konten file dan nama file menggunakan React kait. Ketika sebuah file dipilih, a objek membaca konten file sebagai string yang dikodekan base64. Konten dan nama file disimpan dalam status komponen. Saat pengiriman formulir, fungsi async mengirimkan a permintaan ke API backend dengan konten file dan nama file yang dikodekan base64. Header permintaan disetel ke application/json dan badan permintaan berisi data file. Jika email berhasil dikirim, peringatan akan ditampilkan; jika tidak, peringatan kesalahan akan ditampilkan.

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;

Menangani Unggahan File dalam Formulir React

Saat menangani pengunggahan file dalam formulir React, penting untuk memastikan penanganan pembacaan file dan pengkodean data yang benar. Menggunakan API dalam JavaScript memungkinkan kita membaca konten file secara asinkron, mengonversinya menjadi string berkode base64, yang diperlukan untuk mengirim data file melalui HTTP. String yang disandikan ini dapat dengan mudah dikirimkan sebagai bagian dari isi permintaan saat melakukan panggilan API.

Memastikan bahwa data file dibaca dan dikodekan dengan benar sangat penting untuk menghindari masalah seperti kerusakan data atau unggahan yang tidak lengkap. Selain itu, menangani berbagai jenis dan ukuran file dengan tepat dapat mencegah kesalahan yang tidak terduga. Penanganan kesalahan yang tepat dan umpan balik pengguna, seperti peringatan, juga penting untuk memandu pengguna melalui proses pengunggahan file dan memberi tahu mereka jika terjadi kesalahan.

1. Apa tujuan penggunaan dalam unggahan file?
2. Itu 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 atribut di kolom input. Selain itu, validasi konten file di sisi server.
5. Apa pentingnya acara di ?
6. Itu 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 saat mengirim data file?
10. 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 metode bermain di skrip backend?
16. Itu 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.

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.