Menu
AWS SDK for JavaScript
Developer Guide for SDK version 2.120.0

Uploading Photos to Amazon S3 Code

Here is the browser script code for the Amazon S3 photo album example.

Copy
var albumBucketName = 'BUCKET_NAME'; var bucketRegion = 'REGION'; var IdentityPoolId = 'IDENTITY_POOL_ID'; AWS.config.update({ region: bucketRegion, credentials: new AWS.CognitoIdentityCredentials({ IdentityPoolId: IdentityPoolId }) }); var s3 = new AWS.S3({ apiVersion: '2006-03-01', params: {Bucket: albumBucketName} }); 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>', '<span onclick="deleteAlbum(\'' + albumName + '\')">X</span>', '<span onclick="viewAlbum(\'' + albumName + '\')">', albumName, '</span>', '</li>' ]); }); var message = albums.length ? getHtml([ '<p>Click on an album name to view it.</p>', '<p>Click on the X to delete the album.</p>' ]) : '<p>You do not have any albums. Please Create album.'; var 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); } }); } function createAlbum(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) + '/'; s3.headObject({Key: albumKey}, function(err, data) { if (!err) { return alert('Album already exists.'); } if (err.code !== 'NotFound') { return alert('There was an error creating your album: ' + err.message); } s3.putObject({Key: albumKey}, function(err, data) { if (err) { return alert('There was an error creating your album: ' + err.message); } alert('Successfully created album.'); viewAlbum(albumName); }); }); } 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>', '<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 on the X to delete the photo</p>' : '<p>You do not have any photos in this album. Please add photos.</p>'; var 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); }); } function addPhoto(albumName) { var files = document.getElementById('photoupload').files; if (!files.length) { return alert('Please choose a file to upload first.'); } var file = files[0]; var fileName = file.name; var albumPhotosKey = encodeURIComponent(albumName) + '//'; var photoKey = albumPhotosKey + fileName; s3.upload({ Key: photoKey, Body: file, ACL: 'public-read' }, function(err, data) { if (err) { return alert('There was an error uploading your photo: ', err.message); } alert('Successfully uploaded photo.'); viewAlbum(albumName); }); } function deletePhoto(albumName, photoKey) { s3.deleteObject({Key: photoKey}, function(err, data) { if (err) { return alert('There was an error deleting your photo: ', err.message); } alert('Successfully deleted photo.'); viewAlbum(albumName); }); } function deleteAlbum(albumName) { var albumKey = encodeURIComponent(albumName) + '/'; s3.listObjects({Prefix: albumKey}, function(err, data) { if (err) { return alert('There was an error deleting your album: ', err.message); } var objects = data.Contents.map(function(object) { return {Key: object.Key}; }); s3.deleteObjects({ Delete: {Objects: objects, Quiet: true} }, function(err, data) { if (err) { return alert('There was an error deleting your album: ', err.message); } alert('Successfully deleted album.'); listAlbums(); }); }); }