ReactからAWS S3に画像をアップロードする方法

やりたいこと

ReactアプリからAWS S3に画像ファイルをアップロードしたい。

実現方法

aws-sdkを用いて実装を行う。 aws-sdkはnpm install aws-sdkでインストールする。

S3インスタンスにAWS_KEYとAWS_SEACRET_KEYを設定する。

uploadパラメータには下記要素を設定する。

• Bucket：バケット名
• Key：ファイル名(input配下にアップロードしたいのでinput/を追加している)
• Body：ファイル情報を設定

上記内容を基に画像ファイルのアップロードを実装した。(環境変数は別途指定)

// aws-sdkのインポート
import AWS from "aws-sdk";
import { Credentials } from "aws-sdk";

export const s3Upload = (selectedFile:File): Promise<boolean> => {
  
  // 認証情報の設定
  const creds = new Credentials(
    AWS_KEY,
    AWS_SEACRET_KEY
  );
  // s3インスタンスの生成
  const s3 = new AWS.S3({ region: AWS_REGION, credentials: creds });
  // input配下を指定
  const fileName = "input/" + selectedFile.name;
  // アップロードパラメータを設定
  const uploadParams = {
    Bucket: AWS_BUCKET,
    Key: fileName,
    Body: selectedFile,
  };
  // 非同期でアップロードを実行する。
  return new Promise<boolean>((resolve, reject) => {
    s3.upload(uploadParams, (err:object, data:object) => {
      if (err) {
        console.error("Error uploading file:", err);
        reject(err);
      } else {
        console.log("File uploaded successfully:", data);
        resolve(true);
      }
    });
  })
}

上記コードを実行した結果s3にアップロードを確認できた。

実行後S3

感想

アップロードの実装より、AWSでのセッティングに苦労が多かったので、 手順を残していきたい。