Uploading photos to Amazon S3: Full code - AWS SDK for JavaScript

Help us improve the AWS SDK for JavaScript version 3 (V3) documentation by providing feedback using the Feedback link, or create an issue or pull request on GitHub.

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

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

The HTML for the example:

<!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>

This sample code can be found here on GitHub.

The browser script code for the example:

// 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 // 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; // 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; // 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; // 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; // 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; // 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;

This sample code can be found here on GitHub.