ブラウザから Amazon S3 への写真のアップロード - AWS SDK for JavaScript

改善のお手伝いAWS SDK for JavaScriptを使用してフィードバックを提供することにより、バージョン 3 (V3) のドキュメントフィードバックリンクするか、Issue またはプルリクエストを作成しますGitHub

-AWS SDK for JavaScriptV3 API リファレンスガイドでは、のすべての API オペレーションについて詳しく説明します。AWS SDK for JavaScriptバージョン3 (V3)。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

ブラウザから Amazon S3 への写真のアップロード


                JavaScript code example that applies to browser execution

このブラウザスクリプトコード例では以下を示します。

  • ユーザーが Amazon S3 バケットにフォトアルバムを作成し、アルバムに写真をアップロードできるようにする、ブラウザアプリケーションの作成方法。

シナリオ

この例では、シンプルな HTML ページが Amazon S3 バケットにフォトアルバムを作成するためのブラウザベースのアプリケーションを提供します。このアプリケーションは、写真をアップロードできます。アプリケーションを使用すると、追加した写真やアルバムを削除することができます。


                フォトアルバムに Amazon S3 バケットを使用したブラウザスクリプト内の JavaScript。

ブラウザスクリプトは JavaScript 用 SDK を使用して Amazon S3 バケットと連携します。フォトアルバムアプリケーションを有効にするには、Amazon S3 クライアントクラスの次のメソッドを使用します。

前提条件タスク

この例をセットアップして実行するには、まず次のタスクを完了する必要があります。

  • これらの Node TypeScript の例を実行するようにプロジェクト環境を設定し、必要なものをインストールします。AWS SDK for JavaScriptサードパーティーのモジュール。「」の指示に従って、GitHub

  • Amazon S3 コンソールで、アルバムに写真を保存するために使用する Amazon S3 バケットを作成します。コンソールでバケットを作成する方法の詳細については、「」を参照してください。バケットの作成Amazon Simple Storage Service ユーザーガイド。両方があることを確認してください。Readおよび書き込みのアクセス許可オブジェクト。バケットのアクセス権限の設定に関する詳細については、「」を参照してください。ウェブサイトアクセスのアクセス許可の設定

  • Amazon Cognito コンソールで、Amazon S3 バケットと同じリージョンの認証されていないユーザーに対してアクセスが有効になっているフェデレーテッドアイデンティティを使用して Amazon Cognito ID プールを作成します。コード内の ID プール ID を含めて、ブラウザスクリプトの認証情報を取得する必要があります。Amazon Cognito フェデレーションID の詳細については、「」を参照してください。Amazon Cognito アイデンティティプール (フェデレーティッドアイデンティティ)Amazon Cognito 開発者ガイド

  • IAM コンソールで、Amazon Cognito が認証されていないユーザー用に作成した IAM ロールを見つけます。次のポリシーを追加し、Amazon S3 バケットに読み取りおよび書き込み権限を付与します。IAM ロールの作成の詳細については、「」を参照してください。権限を委任するロールの作成AWSのサービスIAM ユーザーガイド

    認証されていないユーザーに Amazon Cognito が作成した IAM ロールに、このロールポリシーを使用します。

    警告

    認証されていないユーザーに対してアクセスを有効にした場合は、世界中のすべてのユーザーに、バケット、およびバケット内のすべてのオブジェクトへの書き込みアクセス許可が付与されます。このセキュリティ体制がこの例で便利なのは、この例の主な目的に焦点を合わせるためです。多くの実況では、ただし、認証されたユーザーとオブジェクトの所有権を使用するなど、セキュリティを強化することを強くお勧めします。

    { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:DeleteObject", "s3:GetObject", "s3:ListBucket", "s3:PutObject", "s3:PutObjectAcl" ], "Resource": [ "arn:aws:s3:::BUCKET_NAME", "arn:aws:s3:::BUCKET_NAME/*" ] } ] }

CORS の設定

ブラウザスクリプトが Amazon S3 バケットにアクセスする前に、まずそのバケットを設定する必要があります。CORS の設定以下のように設定します。

重要

Amazon S3 で新しいAWSWeb サービス管理コンソールでは、CORS 設定は JSON である必要があります。

JSON
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "ETag" ] } ]
XML
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedHeader>*</AllowedHeader> <ExposeHeader>ETag</ExposeHeader> </CORSRule> </CORSConfiguration>

必要な SDK クライアントとパッケージをインストールする

次の SDK モジュールをインストールします。

注記

SDK モジュールのインストールの詳細については、「」を参照してください。SDK for JavaScript をインストールする

  • クライアント-3

  • クライアント・コグニット・アイデンティティ

  • クレデンシャルプロバイダーのコグニット ID

Webpack のインストール

の V3 を使用するにはAWS SDK for JavaScriptブラウザでは、Webpack に javascript モジュールと関数をバンドルする必要があります。

Web Pack をインストールするには、コマンドラインで以下のように実行します。

npm install --save-dev webpack
重要

この例の package.json のサンプルを表示するには、AWS SDK for JavaScriptGitHub の Samples

注記

Webpack のインストールの詳細については、「」を参照してください。Webpack を使用したアプリケーションのバンドル

ウェブページの定義

写真表示アプリケーション用の HTML は、<div>ブラウザスクリプトが表示/アップロードインターフェイスを作成する要素。

-<script>要素が追加される<main.js>ファイル。このサンプルに必要なすべての JavaScript が含まれています。

注記

を生成するには<main.js>ファイル、「」を参照してください。コードの実行以下。

注記

この例では、必要なものをインポートして使用します。AWSサービス V3 パッケージクライアント、V3 コマンド、およびsend非同期/待機パターンのメソッド。この例は、V2 コマンドで少し変更を加えて、代わりに作成できます。詳細については、「」を参照してくださいV3 コマンドの使用

<!DOCTYPE html> <html> <head> <script src="./main.js"></script> <script> function getHtml(template) { return template.join("\n"); } listAlbums(); </script> </head> <body> <h1>My photo albums app</h1> <div id="app"></div> </body> </html>

SDK の設定

を呼び出して、SDK を設定するために必要な認証情報を取得します。CognitoIdentityCredentialsメソッド。Amazon Cognito ID プール ID を指定します。次に、S3クライアントサービスオブジェクト。

注記

この例では、必要なものをインポートして使用します。AWSサービス V3 パッケージクライアント、V3 コマンド、およびsend非同期/待機パターンのメソッド。この例は、V2 コマンドで少し変更を加えて、代わりに作成できます。詳細については、「」を参照してくださいV3 コマンドの使用

// Load the required clients and packages const { CognitoIdentityClient } = require("@aws-sdk/client-cognito-identity"); const { fromCognitoIdentityPool, } = require("@aws-sdk/credential-provider-cognito-identity"); const { S3Client, PutObjectCommand, ListObjectsCommand, DeleteObjectCommand, DeleteObjectsCommand } = require("@aws-sdk/client-s3"); // Set the AWS Region const REGION = "REGION"; //REGION // Initialize the Amazon Cognito credentials provider const s3 = new S3Client({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: "IDENTITY_POOL_ID", // IDENTITY_POOL_ID }), }); const albumBucketName = "BUCKET_NAME"; //BUCKET_NAME

この例の残りのコードのほとんどすべては、バケット内のアルバムに関する情報を収集して表示し、アルバムにアップロードされた写真をアップロードして表示し、写真とアルバムを削除する一連の関数に整理されます。これらの関数は以下の通りです。

  • listAlbums

  • createAlbum

  • viewAlbum

  • addPhoto

  • deleteAlbum

  • deletePhoto

バケット内のアルバムをリストする

アプリケーションは、キーがスラッシュ文字で始まるオブジェクトとして Amazon S3 バケットにアルバムを作成します。これは、オブジェクトがフォルダとして機能していることを示します。バケットの既存のアルバムをすべて一覧表示するには、アプリケーションのlistAlbums関数を呼び出しますListObjectsCommandの方法S3使用中のクライアントサービスオブジェクトcommonPrefixしたがって、コールはアルバムとして使用されたオブジェクトのみを返します。

関数の残りの部分は Amazon S3 バケットからアルバムのリストを取得し、ウェブページにアルバムのリストを表示するために必要な HTML を生成します。個々のアルバムを削除したり開いたりすることもできます。

注記

この例では、必要なものをインポートして使用します。AWSサービス V3 パッケージクライアント、V3 コマンド、およびsend非同期/待機パターンのメソッド。この例は、V2 コマンドで少し変更を加えて、代わりに作成できます。詳細については、「」を参照してくださいV3 コマンドの使用

// A utility function to create HTML function getHtml(template) { return template.join("\n"); } // Make getHTML function available to the browser window.getHTML = getHtml; // List the photo albums that exist in the bucket const listAlbums = async () => { try { const data = await s3.send( new ListObjectsCommand({ Delimiter: "/", Bucket: albumBucketName }) ); if (data.CommonPrefixes === undefined) { const htmlTemplate = [ "<p>You don't have any albums. You need to create an album.</p>", "<button onclick=\"createAlbum(prompt('Enter album name:'))\">", "Create new album", "</button>", ]; document.getElementById("app").innerHTML = htmlTemplate; } else { var albums = data.CommonPrefixes.map(function (commonPrefix) { var prefix = commonPrefix.Prefix; var albumName = decodeURIComponent(prefix.replace("/", "")); return getHtml([ "<li>", "<span onclick=\"deleteAlbum('" + albumName + "')\">X</span>", "<span onclick=\"viewAlbum('" + albumName + "')\">", albumName, "</span>", "</li>", ]); }); var message = albums.length ? getHtml([ "<p>Click an album name to view it.</p>", "<p>Click the X to delete the album.</p>", ]) : "<p>You do not have any albums. You need to create an album."; const htmlTemplate = [ "<h2>Albums</h2>", message, "<ul>", getHtml(albums), "</ul>", "<button onclick=\"createAlbum(prompt('Enter Album Name:'))\">", "Create new Album", "</button>", ]; document.getElementById("app").innerHTML = getHtml(htmlTemplate); } } catch (err) { return alert("There was an error listing your albums: " + err.message); } }; // Make listAlbums function available to the browser window.listAlbums = listAlbums;

バケットにアルバムを作成する

Amazon S3 バケットにアルバムを作成するには、アプリケーションのcreateAlbum関数は、まず新しいアルバムに付けられた名前を検証して、適切な文字が含まれていることを確認します。この関数は、Amazon S3 オブジェクトキーを作成し、それをheadObjectAmazon S3 サービスオブジェクトのメソッド。このメソッドは指定されたキーのメタデータを返すので、データを返す場合、そのキーを持つオブジェクトはすでに存在しています。

アルバムがまだ存在しない場合、関数は、PutObjectCommandの方法S3アルバムを作成するクライアントサービスオブジェクト。次に、viewAlbum 関数を呼び出し、新しい空のアルバムを表示します。

注記

この例では、必要なものをインポートして使用します。AWSサービス V3 パッケージクライアント、V3 コマンド、およびsend非同期/待機パターンのメソッド。この例は、V2 コマンドで少し変更を加えて、代わりに作成できます。詳細については、「」を参照してくださいV3 コマンドの使用

// Create an album in the bucket const createAlbum = async (albumName) => { albumName = albumName.trim(); if (!albumName) { return alert("Album names must contain at least one non-space character."); } if (albumName.indexOf("/") !== -1) { return alert("Album names cannot contain slashes."); } var albumKey = encodeURIComponent(albumName); try { const key = albumKey + "/"; const params = { Bucket: albumBucketName, Key: key }; const data = await s3.send(new PutObjectCommand(params)); alert("Successfully created album."); viewAlbum(albumName); } catch (err) { return alert("There was an error creating your album: " + err.message); } }; // Make createAlbum function available to the browser window.createAlbum = createAlbum;

アルバムの表示

Amazon S3 バケット内のアルバムの内容を表示するには、アプリケーションのviewAlbum関数は、アルバム名を取得して、そのアルバムの Amazon S3 キーを作成します。次に、この関数はlistObjectsの方法S3アルバム内のすべてのオブジェクト (写真) のリストを取得するためのクライアントサービスオブジェクト。

残りの関数はアルバムからオブジェクト (写真) のリストを取得して、ウェブページに写真を表示するために必要な HTML を生成します。個々の写真を削除したり、アルバムのリストに戻ったりすることもできます。

// View the contents of an album const viewAlbum = async (albumName) => { const albumPhotosKey = encodeURIComponent(albumName) + "/"; try { const data = await s3.send( new ListObjectsCommand({ Prefix: albumPhotosKey, Bucket: albumBucketName, }) ); if (data.Contents.length === 1) { var htmlTemplate = [ "<p>You don't have any photos in this album. You need to add photos.</p>", '<input id="photoupload" type="file" accept="image/*">', '<button id="addphoto" onclick="addPhoto(\'' + albumName + "')\">", "Add photo", "</button>", '<button onclick="listAlbums()">', "Back to albums", "</button>", ]; document.getElementById("app").innerHTML = getHtml(htmlTemplate); } else { console.log(data); const href = "https://s3." + REGION + ".amazonaws.com/"; const bucketUrl = href + albumBucketName + "/"; const photos = data.Contents.map(function (photo) { const photoKey = photo.Key; console.log(photo.Key); const photoUrl = bucketUrl + encodeURIComponent(photoKey); return getHtml([ "<span>", "<div>", '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>', "</div>", "<div>", "<span onclick=\"deletePhoto('" + albumName + "','" + photoKey + "')\">", "X", "</span>", "<span>", photoKey.replace(albumPhotosKey, ""), "</span>", "</div>", "</span>", ]); }); var message = photos.length ? "<p>Click the X to delete the photo.</p>" : "<p>You don't have any photos in this album. You need to add photos.</p>"; const htmlTemplate = [ "<h2>", "Album: " + albumName, "</h2>", message, "<div>", getHtml(photos), "</div>", '<input id="photoupload" type="file" accept="image/*">', '<button id="addphoto" onclick="addPhoto(\'' + albumName + "')\">", "Add photo", "</button>", '<button onclick="listAlbums()">', "Back to albums", "</button>", ]; document.getElementById("app").innerHTML = getHtml(htmlTemplate); document.getElementsByTagName("img")[0].remove(); } } catch (err) { return alert("There was an error viewing your album: " + err.message); } }; // Make viewAlbum function available to the browser window.viewAlbum = viewAlbum;

アルバムに写真を追加する

Amazon S3 バケットのアルバムに写真をアップロードするには、アプリケーションのaddPhoto関数は、Web ページのファイルピッカーエレメントを使用して、アップロードするファイルを特定します。次に、現在のアルバム名とファイル名から写真をアップロードするためのキーを作成します。

関数は、putObjectAmazon S3 サービスオブジェクトのメソッドで、写真をアップロードします。写真をアップロードすると、アップロードされた写真が表示されるように、関数はアルバムを再表示します。

// Add a photo to an album const addPhoto = async (albumName) => { const files = document.getElementById("photoupload").files; try { const albumPhotosKey = encodeURIComponent(albumName) + "/"; const data = await s3.send( new ListObjectsCommand({ Prefix: albumPhotosKey, Bucket: albumBucketName }) ); const file = files[0]; const fileName = file.name; const photoKey = albumPhotosKey + fileName; const uploadParams = { Bucket: albumBucketName, Key: photoKey, Body: file }; try { const data = await s3.send(new PutObjectCommand(uploadParams)); alert("Successfully uploaded photo."); viewAlbum(albumName); } catch (err) { return alert("There was an error uploading your photo: ", err.message); } } catch (err) { if (!files.length) { return alert("Choose a file to upload first."); } } }; // Make addPhoto function available to the browser window.addPhoto = addPhoto;

写真の削除

Amazon S3 バケットのアルバムから写真を削除するには、アプリケーションのdeletePhoto関数を呼び出しますDeleteObjectCommandAmazon S3 クライアントサービスオブジェクトのメソッド。これにより、関数に渡された photoKey の値で指定された写真が削除されます。

// Delete a photo from an album const deletePhoto = async (albumName, photoKey) => { try { console.log(photoKey); const params = { Key: photoKey, Bucket: albumBucketName }; const data = await s3.send(new DeleteObjectCommand(params)); console.log("Successfully deleted photo."); viewAlbum(albumName); } catch (err) { return alert("There was an error deleting your photo: ", err.message); } }; // Make deletePhoto function available to the browser window.deletePhoto = deletePhoto;

アルバムの削除

Amazon S3 バケットのアルバムを削除するには、アプリケーションのdeleteAlbum関数を呼び出しますdeleteObjectsAmazon S3 クライアントサービスオブジェクトのメソッド。

// Delete an album from the bucket const deleteAlbum = async (albumName) => { const albumKey = encodeURIComponent(albumName) + "/"; try { const params = { Bucket: albumBucketName, Prefix: albumKey }; const data = await s3.send(new ListObjectsCommand(params)); const objects = data.Contents.map(function (object) { return { Key: object.Key }; }); try { const params = { Bucket: albumBucketName, Delete: { Objects: objects }, Quiet: true, }; const data = await s3.send(new DeleteObjectsCommand(params)); listAlbums(); return alert("Successfully deleted album."); } catch (err) { return alert("There was an error deleting your album: ", err.message); } } catch (err) { return alert("There was an error deleting your album1: ", err.message); } }; // Make deleteAlbum function available to the browser window.deleteAlbum = deleteAlbum;

コードの実行

この例のコードを実行するには

  1. すべてのコードを名前を付けて保存するs3_PhotoExample.ts

    注記

    このファイルは利用可能ですGitHub で

  2. 置換「地域」とAWS「us-east-1」などのリージョン。

  3. 置換「BUCKET_NAME」Amazon S3 バケットを使用して。

  4. 置換「IDENTITY_POOL_ID」IdentityPoolId をサンプルページこの例で作成した Amazon Cognito ID プールの。

    注記

    -IDENTITY_POOL_ID以下のように、コンソールに赤で表示されます。

    
                            ブラウザスクリプト用の Amazon Cognito ID プールの準備
  5. コマンドラインで以下を実行して、この例の JavaScript をという名前のファイルにバンドルします。<main.js>:

    webpack s3_PhotoExample.ts --mode development --target web --devtool false -o main.js
    注記

    WebPack のインストールの詳細については、「」を参照してください。Webpack を使用したアプリケーションのバンドル

コマンドラインで以下を実行します。

node s3_PhotoUploader.ts