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

Dosya Ekleriyle İletişim Formu Oluşturma

React'te kullanıcıların dosya ekleri içeren e-postalar göndermesine olanak tanıyan bir iletişim formu oluşturmak, özellikle Resend gibi üçüncü taraf hizmetleri entegre ederken zorlayıcı olabilir. Dosya yüklemelerinin doğru kurulumunu ve işlenmesini sağlamak, hataları önlemek için çok önemlidir.

Bu kılavuz, React ve Resend'i kullanarak bir iletişim formu oluşturma konusunda size yol gösterecek ve dosya eklerini yönetme ve sunucu hatalarını ayıklama gibi genel sorunları ele alacaktır. Bu adımları izleyerek, ekleri olan e-postaları sorunsuz bir şekilde gönderebileceksiniz.

Emretmek	Tanım
Resend.emails.send()	Kimden, alıcıya, konu, html ve ekler dahil olmak üzere belirtilen parametrelere sahip bir e-posta gönderir.
setHeader()	Yanıt başlığını belirtilen parametrelerle ayarlar. Burada yalnızca 'POST' yöntemine izin vermek için kullanılır.
FileReader()	Bir dosyanın içeriğini eşzamansız olarak okur. Burada dosyayı bir base64 dizesine dönüştürmek için kullanılır.
readAsDataURL()	Dosyayı base64 kodlu dize olarak okumak için FileReader yöntemi.
onload()	Dosya okuma işlemi tamamlandığında tetiklenen FileReader olay işleyicisi.
split()	Bir dizeyi bir dizi alt dizeye böler. Base64 içeriğini veri URL'si önekinden ayırmak için burada kullanılır.
JSON.stringify()	Bir JavaScript nesnesini veya değerini JSON dizesine dönüştürür.

React İletişim Formunda E-posta Ekini Uygulama

Arka uç komut dosyası, ek içeren e-postalar göndermek için Next.js API yolları ve Yeniden Gönder kitaplığı kullanılarak oluşturulur. Anahtar işlevi, , e-postayı göndermek için kullanılır. Bu fonksiyon aşağıdaki gibi parametreleri alır: , , subject, , Ve . parametresi dosya içeriğini ve dosya adını içerir. Betik, gerekli modülleri içe aktararak başlar ve ortam değişkenlerinde saklanan bir API anahtarını kullanarak Resend örneğini başlatır. Fonksiyon yalnızca POST istekler, e-postanın gönderilmesi ve başarı durumunda e-posta kimliğinin döndürülmesi. Eğer yöntem değilse yanıt başlığını yalnızca izin verilecek şekilde ayarlar 405 durumunu ister ve döndürür.

Ön uçta iletişim formunu yönetmek için bir React bileşeni oluşturulur. Bileşen, React'ı kullanarak dosya içeriği ve dosya adının durumunu korur. kanca. Bir dosya seçildiğinde, nesne dosya içeriğini base64 kodlu bir dize olarak okur. Dosyanın içeriği ve adı bileşenin durumunda saklanır. Form gönderiminde, eşzamansız bir işlev bir mesaj gönderir. Base64 kodlu dosya içeriği ve dosya adı ile arka uç API'sine istekte bulunun. İstek başlıkları şu şekilde ayarlandı: application/json ve istek gövdesi dosya verilerini içerir. E-posta başarıyla gönderilirse bir uyarı gösterilir; aksi halde bir hata uyarısı görüntülenir.

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;

React Forms'ta Dosya Yüklemelerini Yönetme

React formlarında dosya yüklemeyle uğraşırken dosya okuma ve veri kodlamanın doğru şekilde yapılmasını sağlamak çok önemlidir. Kullanmak JavaScript'teki API, dosyaların içeriğini eşzamansız olarak okumamıza olanak tanır ve bunları, dosya verilerini HTTP üzerinden göndermek için gerekli olan base64 kodlu bir dizeye dönüştürür. Bu kodlanmış dize, API çağrıları yapılırken istek gövdesinin bir parçası olarak kolayca iletilebilir.

Dosya verilerinin doğru şekilde okunduğundan ve kodlandığından emin olmak, veri bozulması veya eksik yükleme gibi sorunların önlenmesi açısından çok önemlidir. Ayrıca, çeşitli dosya türlerinin ve boyutlarının uygun şekilde kullanılması beklenmeyen hataları önleyebilir. Doğru hata yönetimi ve uyarılar gibi kullanıcı geri bildirimleri de, kullanıcıya dosya yükleme sürecinde rehberlik etmek ve bir şeyler ters giderse onları bilgilendirmek açısından önemlidir.

1. Kullanım amacı nedir dosya yüklemelerinde?
2. 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. giriş alanındaki öznitelik. Ayrıca dosya içeriğini sunucu tarafında doğrulayın.
5. önemi nedir? olay ?
6. 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? dosya verilerini gönderirken?
10. 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 arka uç komut dosyasında yöntem oynatılıyor mu?
16. 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.

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.