Viewing Photos in an Amazon S3 Bucket: Full Code - AWS SDK for JavaScript

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 parent section for details and prerequisites.

The HTML for the example:

<!DOCTYPE html> <html> <head> <!-- **DO THIS**: --> <!-- Replace SDK_VERSION_NUMBER with the current SDK version number --> <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script> <script src="./PhotoViewer.js"></script> <script>listAlbums();</script> </head> <body> <h1>Photo Album Viewer</h1> <div id="viewer" /> </body> </html>

This sample code can be found here on GitHub.

The browser script code for the example:

// // Data constructs and initialization. // // **DO THIS**: // Replace BUCKET_NAME with the bucket name. // var albumBucketName = 'BUCKET_NAME'; // **DO THIS**: // Replace this block of code with the sample code located at: // Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript // // Initialize the Amazon Cognito credentials provider AWS.config.region = 'REGION'; // Region AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: 'IDENTITY_POOL_ID', }); // Create a new service object var s3 = new AWS.S3({ apiVersion: '2006-03-01', params: {Bucket: albumBucketName} }); // A utility function to create HTML. function getHtml(template) { return template.join('\n'); } // // Functions // // List the photo albums that exist in the bucket. function listAlbums() { s3.listObjects({Delimiter: '/'}, function(err, data) { if (err) { return alert('There was an error listing your albums: ' + err.message); } else { var albums = data.CommonPrefixes.map(function(commonPrefix) { var prefix = commonPrefix.Prefix; var albumName = decodeURIComponent(prefix.replace('/', '')); return getHtml([ '<li>', '<button style="margin:5px;" onclick="viewAlbum(\'' + albumName + '\')">', albumName, '</button>', '</li>' ]); }); var message = albums.length ? getHtml([ '<p>Click on an album name to view it.</p>', ]) : '<p>You do not have any albums. Please Create album.'; var htmlTemplate = [ '<h2>Albums</h2>', message, '<ul>', getHtml(albums), '</ul>', ] document.getElementById('viewer').innerHTML = getHtml(htmlTemplate); } }); } // Show the photos that exist in an album. function viewAlbum(albumName) { var albumPhotosKey = encodeURIComponent(albumName) + '/'; s3.listObjects({Prefix: albumPhotosKey}, function(err, data) { if (err) { return alert('There was an error viewing your album: ' + err.message); } // 'this' references the AWS.Response instance that represents the response var href = this.request.httpRequest.endpoint.href; var bucketUrl = href + albumBucketName + '/'; var photos = data.Contents.map(function(photo) { var photoKey = photo.Key; var 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>', ]); }); var message = photos.length ? '<p>The following photos are present.</p>' : '<p>There are no photos in this album.</p>'; var 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;'); }); }

This sample code can be found here on GitHub.