Viewing photos in an Amazon S3 bucket: Full code - Amazon SDK for JavaScript
Services or capabilities described in Amazon Web Services documentation might vary by Region. To see the differences applicable to the China Regions, see Getting Started with Amazon Web Services in China.

The Amazon SDK for JavaScript V3 API Reference Guide describes in detail all the API operations for the Amazon SDK for JavaScript version 3 (V3).

Starting October 1, 2022, Amazon SDK for JavaScript (v3) will end support for Internet Explorer 11 (IE 11). For details, see Announcing the end of support for Internet Explorer 11 in the Amazon SDK for JavaScript (v3).

Viewing photos in an Amazon S3 bucket: Full code

This section contains the full HTML and JavaScript code for the example in which photos in an Amazon S3 bucket can be viewed. See the the Prerequisites section for details and prerequisites.

The HTML for the example:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="./main.js"></script> </head> <body> <h1>Photo album viewer</h1> <div id="viewer" /> <script> listAlbums(); </script> </body> </html>

This example code can be found here on GitHub.

The following is the browser script code for the example.

Note

This example imports and uses the required Amazon Service V3 package clients, V3 commands, and uses the send method in an async/await pattern. You can create this example using V2 commands instead by making some minor changes. For details, see Using V3 commands.

// 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, ListObjectsCommand } = require("@aws-sdk/client-s3"); // Initialize the Amazon Cognito credentials provider const REGION = "region"; //e.g., 'us-east-1' const s3 = new S3Client({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: "IDENTITY_POOL_ID", // IDENTITY_POOL_ID e.g., eu-west-1:xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx }), }); // A utility function to create HTML. function getHtml(template) { return template.join("\n"); } // Make the getHTML function available to the browser window.getHTML = getHtml; // List the photo albums that exist in the bucket const albumBucketName = "BUCKET_NAME"; //BUCKET_NAME const listAlbums = async () => { try { const data = await s3.send( new ListObjectsCommand({ Delimiter: "/", Bucket: albumBucketName }) ); const albums = data.CommonPrefixes.map(function (commonPrefix) { const prefix = commonPrefix.Prefix; const albumName = decodeURIComponent(prefix.replace("/", "")); return getHtml([ "<li>", '<button style="margin:5px;" onclick="viewAlbum(\'' + albumName + "')\">", albumName, "</button>", "</li>", ]); }); const message = albums.length ? getHtml(["<p>Click an album name to view it.</p>"]) : "<p>You don't have any albums. You need to create an album."; const htmlTemplate = [ "<h2>Albums</h2>", message, "<ul>", getHtml(albums), "</ul>", ]; document.getElementById("viewer").innerHTML = getHtml(htmlTemplate); } catch (err) { return alert("There was an error listing your albums: " + err.message); } }; // Make the viewAlbum function available to the browser window.listAlbums = listAlbums; // Show the photos that exist in an album const viewAlbum = async (albumName) => { try { const albumPhotosKey = encodeURIComponent(albumName) + "/"; const data = await s3.send( new ListObjectsCommand({ Prefix: albumPhotosKey, Bucket: albumBucketName, }) ); const href = "https://s3." + REGION + ".amazonaws.com/"; const bucketUrl = href + albumBucketName + "/"; const photos = data.Contents.map(function (photo) { const photoKey = photo.Key; const photoUrl = bucketUrl + encodeURIComponent(photoKey); return getHtml([ "<span>", "<div>", "<br/>", '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>', "</div>", "<div>", "<span>", photoKey.replace(albumPhotosKey, ""), "</span>", "</div>", "</span>", ]); }); const message = photos.length ? "<p>The following photos are present.</p>" : "<p>There are no photos in this album.</p>"; const htmlTemplate = [ "<div>", '<button onclick="listAlbums()">', "Back To albums", "</button>", "</div>", "<h2>", "Album: " + albumName, "</h2>", message, "<div>", getHtml(photos), "</div>", "<h2>", "End of album: " + albumName, "</h2>", "<div>", '<button onclick="listAlbums()">', "Back To albums", "</button>", "</div>", ]; document.getElementById("viewer").innerHTML = getHtml(htmlTemplate); document .getElementsByTagName("img")[0] .setAttribute("style", "display:none;"); } catch (err) { return alert("There was an error viewing your album: " + err.message); } }; // Make the viewAlbum function available to the browser window.viewAlbum = viewAlbum;

This example code can be found here on GitHub.