@aws-sdk/lib-storage/Upload sends inclomplete request body for CompleteMultipartUpload

Question

I am using the Upload class from @aws-sdk/lib-storage to upload files to an S3 bucket, directly from the browser.

export const putObject = (s3Client, bucketName, path, file) => {
  const params = {
    Bucket: bucketName,
    Key: `${path}${file.name}`,
    Body: file,
  };

  const upload = new Upload({
    client: s3Client,
    params: params,
  });

  upload.on("httpUploadProgress", (progress) => {
    console.log(progress);
  });

  return upload.done();
};

It works fine for smaller files when it uploads with a single putObject. However for large files, when it performs a multipart upload, it fails. When looking at the requests I noticed that the completeMultipartUpload request body seems incomplete.

<?xml version="1.0" encoding="UTF-8"?>
  <CompleteMultipartUpload xmlns="http://s3.amazonaws.com/doc/2006-03-01/"/>

Its missing both the parts and closing tags. Does anyone know what could have caused this and how to fix it?

Answer 1

I solved it by exposing the "ETag" header in the buckets CORS settings. The ETag was present in the UploadPartResponse but it was not read by the browser due to CORS, resulting in an incomplete request body when sending the CompleteMultipartUploadCommand.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "your-app-url"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

From what I gathered online you could wildcard exposed headers but that is not supported by safari and firefox.