The AWS SDK for JavaScript v2 has reached end-of-support. We recommend that you migrate to [AWS SDK for JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). For additional details and information on how to migrate, please refer to this [announcement](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).
# Uploading Photos to Amazon S3: Full Code
This section contains the full HTML and JavaScript code for the example in which photos are uploaded to an Amazon S3 photo album. See the [parent section](s3-example-photo-album.md) for details and prerequisites.
The HTML for the example:
```
My Photo Albums App
```
This sample code can be found [here on GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/master/javascript/example_code/s3/s3_photoExample.html).
The browser script code for the example:
```
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([
"
",
"X",
"",
albumName,
"",
"
",
]);
});
var message = albums.length
? getHtml([
"
Click on an album name to view it.
",
"
Click on the X to delete the album.
",
])
: "
You do not have any albums. Please Create album.";
var htmlTemplate = [
"
Albums
",
message,
"
",
getHtml(albums),
"
",
"",
];
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([
"",
"
You do not have any photos in this album. Please add photos.
";
var htmlTemplate = [
"
",
"Album: " + albumName,
"
",
message,
"
",
getHtml(photos),
"
",
'',
'",
'",
];
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;
// Use S3 ManagedUpload class as it supports multipart uploads
var upload = new AWS.S3.ManagedUpload({
params: {
Bucket: albumBucketName,
Key: photoKey,
Body: file,
},
});
var promise = upload.promise();
promise.then(
function (data) {
alert("Successfully uploaded photo.");
viewAlbum(albumName);
},
function (err) {
return alert("There was an error uploading your photo: ", err.message);
}
);
}
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();
}
);
});
}
```
This sample code can be found [here on GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/master/javascript/example_code/s3/s3_photoExample.js).
',
"