フォームから画像を挿入してサムネイルを表示、同時にAWS S3へデプロイする #JavaScript

ちょっとやりたいことがあったので調査がてら。

やること

*　フォームから画像をアップロードして、S3バケットへデプロイ
*　JavaScript で実装する

挙動は以下の通り

ファイルが挿入できるフォームを表示
コンピュータから画像を挿入
サムネイルを生成してフォーム画面上に表示
挿入した画像をAWS S3へデプロイ

実装の流れ

S3バケットとIAMを準備
JavaScript SDKをつかって実装

S3バケットとIAMを準備

S3でバケットを作る
IAMでS3専用のユーザーを作成する
S3へのフルアクセス権限を設定

概ね以下の記事の通り。
http://qiita.com/TakeshiNickOsanai/items/ab17c9f28b9f4ee399c3

S3のバケットへCORSの設定をしておく。

CORSの設定

<!-- Sample policy -->
<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
      <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>*</AllowedHeader>
    <AllowedHeader>Authorization</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

JavaScript SDKを使って実装

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>AWS S3へ画像をアップロード</title>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.12.0.min.js"></script>
</head>
<body>

  <div class="container" id="container">
    <h2>画像をS3へアップロード</h2>
    <div id="content">
      <p><input id="fileToUpload" name="upload" type="file"></p>
    </div>
    <div id="thumbnail"></div>
  </div>

<script>

// AWS Configure 設定

  AWS.config.update({
    accessKeyId: 'アクセスキー',
    secretAccessKey: 'シークレットキー',
    region: 'us-east-1', // S3バケットのリージョンを指定する
  });

// API のバージョンを指定

  AWS.config.apiVersions = {
    rekognition: '2016-06-27',
  };

// s3 に画像をアップロードする関数 UploadToS3を定義

  const UploadToS3 = function() {
    const s3BucketName = 'バケット名';
    const s3 = new AWS.S3({
      params: {
        Bucket: s3BucketName,
        Region: s3BucketName
      }
    });
    const s3file = document.getElementById('fileToUpload').files[0];
    if (s3file) {
      s3.putObject({
        Key: s3file.name,
        ContentType: s3file.type,
        Body: s3file,
        ACL: "public-read"
      }, function(err, data) {
        if (data !== null) {
          console.log("upload completed");
        };
      });
    }
  }

// 画像の挿入時にサムネイル表示と、S3へのデプロイを行う

  $(function() {
    $("#thumbnail").prepend('<span id=\"image\"></span>');

// アップロードするファイルを選択

    $('input[type=file]').change(function() {
      const file = $(this).prop('files')[0];
      if (!file.type.match('image.*')) {
        $(this).val('');
        $('span').html('');
        return;
      }

// 画像表示

      const reader = new FileReader();
      reader.onload = function() {
        const img_src = $('<img height=\"300\">').attr('src', reader.result);
        $('span').html(img_src);
      }
      reader.readAsDataURL(file);
      UploadToS3();
    });
  });
</script>

</body>
</html>

注意

サンプル実装なので、アクセスキーとシークレットキーを直接記述しましたが、目に見える形で2つのキーを記述するのは危険です。ご注意ください。

参考

http://php.o0o0.jp/article/jquery-preview_thumbnail
http://dev.classmethod.jp/cloud/aws-s3-direct-upload/
https://www.lancork.net/2013/11/aws-sdk-for-javascript-in-the-browser-sample/