How to Add x-amz-meta-<key> = "<value>" To S3 Bucket Object Metadata

[jaradc]

I'm new to EvaporateJS. I came across it because I'm using django-s3direct. Please see that link. I'm literally using that code unmodified as it is.

What Am I Trying To Do?

I want to attach metadata to the S3 uploaded file and I want to see that metadata on the object when I view it within the S3 interface (like in my image above).

What Have I Tried?

I Learned from issue #428 that Evaporate.prototype.add() is where I should define metadata.

In the django-s3direct code, I see this:

const addConfig = {
		name: uploadParameters.object_key,
		file: file,
		contentType: file.type,
		xAmzHeadersCommon: generateAmzCommonHeaders(uploadParameters.session_token),
		xAmzHeadersAtInitiate: generateAmzInitHeaders(
			uploadParameters.acl,
			uploadParameters.server_side_encryption,
			uploadParameters.session_token
		),
		progress: (progressRatio, stats) => {
			updateProgressBar(element, progressRatio);
		},
		warn: (warnType, area, msg) => {
			if (msg.includes('InvalidAccessKeyId')) {
				error(element, msg);
			}
		}
	};

I have tried adding the following, but I still don't see any metadata appear on my uploaded S3 object.

Tried to add header x-amz-meta-abc in the generateAmzCommonHeaders part (which defines xAmzHeadersCommon):

const generateAmzCommonHeaders = sessionToken => {
	const headers = {};
	if (sessionToken) headers['x-amz-security-token'] = sessionToken;
	headers['x-amz-meta-abc'] = '123'; // <--- tried this
	return headers;
};

Tried to add header x-amz-meta-abc in generateAmzInitHeaders const (which defines xAmzHeadersAtInitiate):

const generateAmzInitHeaders = (acl, serverSideEncryption, sessionToken) => {
	const headers = {};
	if (acl) headers['x-amz-acl'] = acl;
	if (sessionToken) headers['x-amz-security-token'] = sessionToken;
	if (serverSideEncryption) {
		headers['x-amz-server-side-encryption'] = serverSideEncryption;
	}
	headers['x-amz-meta-abc'] = '123'; // <--- tried this
	return headers;
};

Adding to notSignedHeadersAtInitiate:

	const optHeaders = {};
	optHeaders['x-amz-meta-abc'] = '123';
        ...
	addConfig['notSignedHeadersAtInitiate'] = optHeaders;

Both versions of xAmzHeadersAtUpload and xAmzHeadersAtComplete:

	const addConfig = {
		name: uploadParameters.object_key,
		file: file,
		contentType: file.type,
		xAmzHeadersCommon: generateAmzCommonHeaders(uploadParameters.session_token),
		xAmzHeadersAtInitiate: generateAmzInitHeaders(
			uploadParameters.acl,
			uploadParameters.server_side_encryption,
			uploadParameters.session_token
		),
		xAmzHeadersAtUpload: {'x-amz-meta-abc': '123'}, // <-- tried this
		xAmzHeadersAtComplete: {'x-amz-meta-abc': '123'}, // <-- tried this
		progress: (progressRatio, stats) => {
			updateProgressBar(element, progressRatio);
		},
		warn: (warnType, area, msg) => {
			if (msg.includes('InvalidAccessKeyId')) {
				error(element, msg);
			}
		}
	};

What am I'm doing wrong? Is it a CORS or bucket config? Is it my code or approach / understanding?

[stri8ed]

use this:

 xAmzHeadersAtInitiate: {
    'x-amz-meta-custom-meta-key': 'CustomMetaDataValue'
}