素肌にサスペンダー

個人的な備忘と日記

Cognito Identity PoolsとJavaScriptで、AWSのS3にファイルアップする方法

AWS S3 JavaScript

1.AWSコンソール上で、CORSの設定をする。

以下を参考に実施。設定をしないと、クロスドメインリクエスト許可されていないのでエラーになる。

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html#s3-example-photo-album-cors-configuration

2.Cognitoの設定をする。

www.selfree.co.jp

funasaki.hatenablog.com

上記の記事を参考に以下を実施する

  • Amazon Cognito で Identity Pool の作成（作成したPool IDを控えておく）
  • IAM ロールの設定

3.S3のConfig情報を確認する。

必要な情報

4.JavaScriptのコードを書く。

ファイルをローカルからアップしてアップロードボタンを押すとアップロードされるサンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!-- aws-sdk読み込み -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.12.0.min.js"></script>
  </head>
  <body>
    <p>
      <input id="upload" name="upload" type="file">
    </p>
    <button onclick="uploadFile()">
      アップロード
    </button>
  <script>

    // AWS Config情報
    const bucketName = 'バケットネーム';
    const region = 'リージョン';

    // Cognito Pool ID
    const poolId = 'プールID';

    // S3にファイルをアップロードする関数
    const uploadFile = function() {
      const params = {
        IdentityPoolId: poolId
      }
      AWS.config.region = region
      AWS.config.credentials = new AWS.CognitoIdentityCredentials(params)
      const file = $('input[type=file]').prop('files')[0]
      AWS.config.credentials.get(function (err) {
        if (!err) {
          var bucket = new AWS.S3({
            params: {
              Bucket: bucketName
            }
          })
          var params1 = {
            Key: file.name,
            // ディレクトリ分けしたい場合
            // Key: 'directory/' + file.name,
            ContentType: file.type,
            Body: file
          }
          bucket.putObject(params1, function(err, data) {
            if (data === null) {
              console.log(err)
            }
          });
        }
      })
    }
  </script>
  </body>
</html>

※ディレクトリ分けたい場合は、Keyに文字列を付与する 参考 dev.classmethod.jp