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

Lucas Simon
2024年5月17日金曜日 0:16:25
React.js and Next.js

ファイルを添付したお問い合わせフォームの作成

React でユーザーがファイルを添付してメールを送信できる問い合わせフォームを作成することは、特に Resend などのサードパーティ サービスを統合する場合に困難になることがあります。エラーを回避するには、ファイルのアップロードを正しく設定し処理することが重要です。

このガイドでは、React と Resend を使用して問い合わせフォームを設定する手順を説明し、添付ファイルの処理やサーバー エラーのデバッグなどの一般的な問題に対処します。次の手順に従うことで、添付ファイル付きのメールをシームレスに送信できるようになります。

指示 説明
Resend.emails.send() 送信元、宛先、件名、HTML、添付ファイルなどの指定されたパラメーターを含む電子メールを送信します。
setHeader() 指定されたパラメーターを使用して応答ヘッダーを設定します。ここでは「POST」メソッドのみを許可するために使用されます。
FileReader() ファイルの内容を非同期に読み取ります。ファイルをbase64文字列に変換するためにここで使用されます。
readAsDataURL() ファイルをbase64でエンコードされた文字列として読み取るFileReaderのメソッド。
onload() ファイル読み取り操作が完了したときにトリガーされる FileReader のイベント ハンドラー。
split() 文字列を部分文字列の配列に分割します。ここでは、base64 コンテンツをデータ URL プレフィックスから分離するために使用されます。
JSON.stringify() JavaScript オブジェクトまたは値を JSON 文字列に変換します。

React の問い合わせフォームに電子メールの添付ファイルを実装する

バックエンド スクリプトは、Next.js API ルートと添付ファイル付き電子メールを送信するための再送信ライブラリを使用して作成されます。重要な機能は、 , メールの送信に使用されます。この関数は次のようなパラメータを取ります。 、 、 subject、 、 そして 。の パラメータにはファイルの内容とファイル名が含まれます。スクリプトは必要なモジュールをインポートすることで開始され、環境変数に格納されている API キーを使用して再送信インスタンスを初期化します。関数はのみを処理します POST リクエストを実行し、電子メールを送信し、成功すると電子メール ID を返します。メソッドがそうでない場合は、 のみを許可するように応答ヘッダーを設定します。 を要求し、405 ステータスを返します。

フロントエンドでは、問い合わせフォームを処理するための React コンポーネントが作成されます。コンポーネントは、React のメソッドを使用してファイルの内容とファイル名の状態を維持します。 針。ファイルを選択すると、 オブジェクトは、ファイルの内容を Base64 でエンコードされた文字列として読み取ります。ファイルの内容と名前はコンポーネントの状態に保存されます。フォーム送信時に、非同期関数が Base64 でエンコードされたファイルのコンテンツとファイル名を使用して、バックエンド API にリクエストを送信します。リクエストヘッダーは次のように設定されます application/json リクエストボディにはファイルデータが含まれます。電子メールが正常に送信されると、アラートが表示されます。それ以外の場合は、エラー警告が表示されます。

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

再送信を使用した 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 Forms でのファイルアップロードの処理

React フォームでファイルのアップロードを処理する場合、ファイルの読み取りとデータのエンコードを正しく処理することが重要です。を使用して、 JavaScript の API を使用すると、ファイルのコンテンツを非同期で読み取り、HTTP 経由でファイル データを送信するために必要な Base64 でエンコードされた文字列に変換できます。このエンコードされた文字列は、API 呼び出しを行うときにリクエスト本文の一部として簡単に送信できます。

データの破損や不完全なアップロードなどの問題を回避するには、ファイル データが正しく読み取られてエンコードされていることを確認することが重要です。さらに、さまざまなファイルの種類とサイズを適切に処理することで、予期しないエラーを防ぐことができます。適切なエラー処理とアラートなどのユーザー フィードバックも、ファイルのアップロード プロセスをユーザーにガイドし、何か問題が発生した場合に通知するために重要です。

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

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