Edited at

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

More than 1 year has passed since last update.

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


やること

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

* JavaScript で実装する

挙動は以下の通り


  1. ファイルが挿入できるフォームを表示

  2. コンピュータから画像を挿入

  3. サムネイルを生成してフォーム画面上に表示

  4. 挿入した画像を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/