React'ta Ekli E-posta Gönderme Kılavuzu

Yeniden Gönder'i kullanarak Ekli E-posta Göndermek için Arka Uç Komut Dosyası

Next.js'de Resend ile arka uç betiği

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;

Dosya Ekli İletişim Formu için Ön Uç Bileşeni

React.js'deki ön uç bileşeni

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;

React'ta Ekli E-posta Gönderme Hakkında Sık Sorulan Sorular ve Cevaplar

1. Kullanım amacı nedir FileReader dosya yüklemelerinde?
2. FileReader API, dosyaların içeriğini eşzamansız olarak okumak ve bunları HTTP isteklerinde iletim için base64 dizesi olarak kodlamak için kullanılır.
3. Dosya yüklemelerimin güvenli olduğundan nasıl emin olabilirim?
4. kullanarak yalnızca belirli dosya türlerinin kabul edildiğinden emin olun. accept giriş alanındaki öznitelik. Ayrıca dosya içeriğini sunucu tarafında doğrulayın.
5. önemi nedir? onload olay FileReader?
6. onload olayı, dosya okuma işlemi tamamlandığında tetiklenerek dosyanın içeriğine erişmenize ve başka eylemler gerçekleştirmenize olanak tanır.
7. React'te büyük dosyaları nasıl işleyebilirim?
8. Büyük dosyalar için, tarayıcı belleği sınırlamalarını önlemek ve kullanıcıya ilerleme durumu geri bildirimi sağlamak amacıyla parçalı dosya yüklemeleri uygulamayı düşünün.
9. Neden kullanmam gerekiyor? JSON.stringify dosya verilerini gönderirken?
10. JSON.stringify dosya verilerini içeren JavaScript nesnesini, API çağrılarında istek gövdesi için gerekli format olan bir JSON dizesine dönüştürür.
11. E-posta gönderirken 500 (Dahili Sunucu Hatası) neyi gösterir?
12. 500 hatası genellikle hatalı API uç noktası yapılandırması veya e-posta gönderme hizmetindeki sorunlar gibi sunucu tarafında bir soruna işaret eder.
13. API çağrılarımdaki 500 hatasını nasıl ayıklayabilirim?
14. Ayrıntılı hata mesajları için sunucu günlüklerini kontrol edin ve API uç noktası ile istek yükünün doğru şekilde yapılandırıldığından emin olun.
15. Hangi rol res.setHeader arka uç komut dosyasında yöntem oynatılıyor mu?
16. res.setHeader yöntemi, izin verilen HTTP yöntemlerini (ör. 'POST') belirterek HTTP yanıt başlığını ayarlamak için kullanılır.
17. Dosya yüklemeleri sırasında kullanıcı geri bildirimini nasıl sağlayabilirim?
18. Kullanıcıları yükleme durumu ve karşılaşılan hatalar konusunda bilgilendirmek için uyarı mesajlarını, ilerleme çubuklarını veya durum göstergelerini kullanın.
19. Bu kurulumla aynı anda birden fazla dosya yükleyebilir miyim?
20. Bu kurulum tek dosya yüklemelerini yönetir. Birden fazla dosya için, dosya verisi dizilerini işleyecek ve bunları API isteğinde gönderecek şekilde kodu değiştirmeniz gerekir.

React İletişim Formları Hakkında Son Düşünceler

Resend kullanarak React iletişim formunda dosya eklerinin uygulanması hem ön uç hem de arka uç yapılandırmalarını içerir. Ön uç, dosya seçimini, okumayı ve base64'e kodlamayı yönetirken, arka uç, Resend'in API'sini kullanarak e-postayı ekle birlikte göndermeyi yönetir. Sorunsuz bir kullanıcı deneyimi için doğru hata işleme ve kullanıcı geri bildirim mekanizmaları çok önemlidir. En iyi uygulamaları takip etmek ve tüm yapılandırmaların doğru olduğundan emin olmak, sunucu hataları gibi yaygın karşılaşılan tuzaklardan kaçınmanıza yardımcı olabilir.