React で添付ファイル付きのメールを送信するためのガイド

再送信を使用して添付ファイル付き電子メールを送信するバックエンド スクリプト

再送信を使用した Next.js のバックエンド スクリプト

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;

ファイル添付のあるお問い合わせフォームのフロントエンド コンポーネント

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;

React での添付ファイル付きメールの送信に関するよくある質問と回答

1. 使用目的は何ですか FileReader ファイルアップロードで？
2. の FileReader API は、ファイルの内容を非同期的に読み取り、HTTP リクエストで送信するために Base64 文字列としてエンコードするために使用されます。
3. ファイルのアップロードが安全であることを確認するにはどうすればよいですか?
4. を使用して、特定のファイル タイプのみが受け入れられるようにします。 accept 入力フィールドの属性。さらに、サーバー側でファイルの内容を検証します。
5. の重要性は何ですか onload のイベント FileReader?
6. の onload ファイルの読み取り操作が完了するとイベントがトリガーされ、ファイルの内容にアクセスしてさらなるアクションを実行できるようになります。
7. React で大きなファイルを処理するにはどうすればよいですか?
8. 大きなファイルの場合は、ブラウザのメモリ制限を回避し、進行状況のフィードバックをユーザーに提供するために、チャンク ファイルのアップロードを実装することを検討してください。
9. なぜ使用する必要があるのですか JSON.stringify ファイルデータを送るときは？
10. JSON.stringify ファイル データを含む JavaScript オブジェクトを JSON 文字列に変換します。これは、API 呼び出しのリクエスト本文に必要な形式です。
11. 電子メール送信時の 500 (内部サーバー エラー) は何を示していますか?
12. 500 エラーは通常、不正な API エンドポイント構成や電子メール送信サービス内の問題など、サーバー側の問題を示します。
13. API 呼び出しの 500 エラーをデバッグするにはどうすればよいですか?
14. サーバー ログで詳細なエラー メッセージを確認し、API エンドポイントとリクエスト ペイロードが正しく構成されていることを確認してください。
15. はどのような役割を果たしますか res.setHeader バックエンドスクリプトでメソッド再生?
16. の res.setHeader メソッドは、許可される HTTP メソッド (「POST」など) を指定して、HTTP 応答ヘッダーを設定するために使用されます。
17. ファイルのアップロード中にユーザーからのフィードバックを提供するにはどうすればよいですか?
18. アラート メッセージ、進行状況バー、またはステータス インジケーターを使用して、アップロード ステータスと発生したエラーをユーザーに通知します。
19. この設定で複数のファイルを一度にアップロードできますか?
20. このセットアップは単一ファイルのアップロードを処理します。複数のファイルの場合は、ファイル データの配列を処理し、API リクエストで送信するようにコードを変更する必要があります。

React コンタクトフォームに関する最終的な考え

Resend を使用して React コンタクト フォームに添付ファイルを実装するには、フロントエンドとバックエンドの両方の構成が必要です。フロントエンドはファイルの選択、読み取り、base64 へのエンコードを処理し、バックエンドは Resend の API を使用して添付ファイル付き電子メールの送信を管理します。適切なエラー処理とユーザー フィードバック メカニズムは、シームレスなユーザー エクスペリエンスにとって非常に重要です。ベスト プラクティスに従い、すべての構成が正しいことを確認すると、サーバー エラーなどのよくある落とし穴を回避できます。