I'm encountering an issue where custom metadata set during file upload to AWS S3 using @aws-sdk/client-s3 is not being retrieved when fetching the object's metadata later.
Problem Description:
I'm uploading media files (images, videos) to an S3 bucket along with custom metadata (title and description) using the PutObjectCommand. The upload appears to be successful, and I can see the files in my bucket. However, when I attempt to retrieve the metadata using HeadObjectCommand, the Metadata property of the response is consistently empty.
import { S3Client, PutObjectCommand, GetObjectCommand, HeadObjectCommand, ListObjectsV2Command } from '@aws-sdk/client-s3';
const s3Client = new S3Client({
region: 'MyRegion',
credentials: {
accessKeyId: 'MyAccessKey',
secretAccessKey: 'MySecretAccessKey',
},
});
export const BUCKET_BASE_URL = "MyBucketBaseURL";
export const getHrefAgainstKey = (key) => {
return `${BUCKET_BASE_URL}${key}`;
};
const S3MediaUploader = () => {
const [file, setFile] = useState(null);
const [metadata, setMetadata] = useState({ title: '', description: '' });
const [uploadedMedia, setUploadedMedia] = useState([]);
const [loading, setLoading] = useState(false);
const bucketName = 'MyBucketName';
const handleFileChange = (e) => {
setFile(e.target.files[0]);
};
const handleMetadataChange = (e) => {
setMetadata({ ...metadata, [e.target.name]: e.target.value });
};
const handleUpload = async () => {
if (!file) {
alert('Please select a file.');
return;
}
setLoading(true);
const reader = new FileReader();
reader.onload = async (event) => {
const arrayBuffer = event.target.result;
const uint8Array = new Uint8Array(arrayBuffer);
const params = {
Bucket: bucketName,
Key: file.name,
Body: uint8Array,
Metadata: {
title: metadata.title.toLowerCase(),
description: metadata.description.toLowerCase(),
},
ACL: "public-read",
ContentType: file.type,
};
try {
const response = await s3Client.send(new PutObjectCommand(params));
alert('File uploaded successfully!');
setFile(null);
setMetadata({ title: '', description: '' });
fetchMedia();
} catch (error) {
console.error('Error uploading file:', error);
alert('Error uploading file.');
} finally {
setLoading(false);
}
};
reader.onerror = () => {
console.error('Error reading file.');
setLoading(false);
};
reader.readAsArrayBuffer(file);
};
const fetchMedia = async () => {
setLoading(true);
try {
const response = await s3Client.send(new ListObjectsV2Command({ Bucket: bucketName }));
if (response.Contents) {
const media = await Promise.all(
response.Contents.map(async (item) => {
const getObjectParams = {
Bucket: bucketName,
Key: item.Key,
};
const //Empty Metadata = await s3Client.send(new HeadObjectCommand(getObjectParams)); **// Getting Empty Metadata.Metadata**
return {
key: item.Key,
href: getHrefAgainstKey(item.Key),
url: BUCKET_BASE_URL,
metadata: {metadataResponse.Metadata},
};
})
);
setUploadedMedia(media);
} else {
setUploadedMedia([]);
}
} catch (error) {
console.error('Error fetching media:', error);
} finally {
setLoading(false);
}
};
IAM User Policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:*",
"s3tables:*",
"iam:PassRole"
],
"Resource": "*"
}
]
}
Dependencies:
"dependencies": {
"@aws-sdk/client-s3": "^3.749.0",
}
Troubleshooting Steps Taken:
Verified that the upload process completes without errors.
Confirmed that the files are present in the S3 bucket.
Tried using both HeadObjectCommand and GetObjectCommand to fetch metadata.
Checked IAM user permissions to ensure full S3 access.
Ensured that the metadata keys are lowercase (as per S3 requirements).
Expected Behavior: I expect the Metadata property of the HeadObjectCommand or GetObjectCommand response to contain the title and description values set during upload.
Actual Behavior: The Metadata property is consistently empty.