Unable to send/receive custom metadata with S3 Upload

I am using ng-file-upload to upload a JPG file to my S3 Bucket.

file.upload = Upload.upload({
    url: "https://<my-bucket-name>.s3.amazonaws.com/", 
    method: "POST",
    data: {
        key: "custom-filename.jpg", 
        AWSAccessKeyId: "<AWSAccessKeyId>",
        acl: "public-read", 
        policy: <policy>, 
        signature: <signature>, 
        "Content-Type": "image/jpeg", 
        filename: file.name, 
        file: file, 
        Metadata: {
            "x-amz-meta-hello": "Custom Metadata Value"
        }
    }
});

I have also tried the following (in the above code)

Metadata: {
    hello: "Custom Metadata Value"
}

& simply

"x-amz-meta-hello": "Custom Metadata Value"

I have included the Custom Metadata in my Policy file as

["starts-with", "x-amz-meta-hello", ""]

Also, the CORS Configuration under Bucket Permissions on S3 is

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>x-amz-meta-hello</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

The above code and settings are working, the JPG file is successfully uploaded, but somehow the Custom Metadata value is not being set.

On successful upload, I am calling a Lambda function to resize the JPG and storing it in a separate bucket. Even this part is working but I am not able to read the Custom Metadata (x-amz-meta-hello) value in my Lambda Function. I need that value to assign a separate folder to the uploaded file.

To read the Custom Metadata in my Lambda Function

var s3 = new AWS.S3();
s3.headObject({
    Bucket: <BucketName>,
    Key: <S3ObjectKey>
}, function(err, data) {
    if (err) {
        console.log(err);
    }
    else
    {   
        console.log(data);
    }     
});

Not sure what am I missing here … Please advise.

Thanks. (AngularJS version 1.5.0, ng-file-upload version 12.2.9, Google Chrome version 53.0.2785.113 on OSX 10.10.5)

[rahatarmanahmed]

I ran into this issue also and the stacko answer wasn’t that helpful because it still had some issues. Here’s what I did to fix it:

1. Metadata must be provided in the form of a x-amz-meta-{key}: {value} header. But POST requests are special in that headers are instead sent as form data. So what we need to send looks like:

data: {
    key: "custom-filename.jpg", 
    AWSAccessKeyId: "<AWSAccessKeyId>",
    acl: "public-read", 
    policy: <policy>, 
    signature: <signature>, 
    "Content-Type": "image/jpeg", 
    filename: file.name, 
    file: file, 
    "x-amz-meta-hello": "Custom Metadata Value"
}

1. The upload policy needs to have a condition for this metadata field, or else it will complain with an error about receiving extra data. @sh59 almost has the right condition, it just needs to reference the metadata with a $ in order to work.

["starts-with", "$x-amz-meta-hello", ""]

Fixing these two things made it work for me. This issue can be closed.

[vaibhavshah2108]

I am following this documentation to upload S3 object using API gateway, with no Lambda in between. This works using Postman! The problem happens when I am trying to add user-defined metadata to headers, but that seems to be not working. I also tried to add “x-amz-meta-{key}”: “{value}” in the form-data field of the body, and that did not work as well. Any recommended solution? Thanks in advance!