I'm trying to implement the browser-based upload to a S3 bucket as described in the Post Upload Example documentation. The policy and form are identical to the documentation example except for the bucket name and AWS account credentials. I encode the policy and create the signature with Java SDK.
When I submit the form without selecting a file, a 0-byte object is created in the bucket. When I select a file and submit it, the POST request is sent (can see it in the Network debug panel) but remains pending until a browser complains that the connection has timed out. As I'm able to create the 0-byte object in the bucket, I assume that my policy and signature are correct and the problem is in the form. Please help to understand what could be wrong.
Here are my policy and HTML form:
{
"expiration":"2023-11-13T19:36:48.000Z",
"conditions":[
{"bucket":"my.dev-bucket"},
["starts-with","$key","organizations/ungeQuaiphoo2shusais9cai/files/"],
{"acl":"public-read"},
{"success_action_redirect":"http://my.dev-bucket/successful_upload.html"},
{"x-amz-meta-uuid": "14365123651274"},
["starts-with", "$Content-Type", "image/"],
{"x-amz-meta-filename":"5f5b9e76bdc1362a2b65e78b.png"},
{"x-amz-server-side-encryption":"AES256"},
["starts-with","$x-amz-meta-tag",""],
{"x-amz-credential":"<my AWS access key id>/20231113/eu-west-1/s3/aws4_request"},
{"x-amz-algorithm":"AWS4-HMAC-SHA256"},
{"x-amz-date":"20231113T000000Z"}
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Signed File Upload</title>
</head>
<body>
<form action="http://my.dev-bucket.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
<input type="input" name="key" value="organizations/ungeQuaiphoo2shusais9cai/files/5f5b9e76bdc1362a2b65e78b.png" /><br />
<input type="hidden" name="acl" value="public-read" />
<input type="hidden" name="success_action_redirect" value="http://my.dev-bucket.s3.amazonaws.com/successful_upload.html" />
<input type="input" name="Content-Type" value="image/png" /><br />
<input type="hidden" name="x-amz-meta-uuid" value="14365123651274" />
<input type="hidden" name="x-amz-meta-filename" value="5f5b9e76bdc1362a2b65e78b.png" />
<input type="hidden" name="x-amz-server-side-encryption" value="AES256" />
<input type="text" name="X-Amz-Credential" value="<my AWS access key id>/20231112/eu-west-1/s3/aws4_request" />
<input type="text" name="X-Amz-Algorithm" value="AWS4-HMAC-SHA256" />
<input type="text" name="X-Amz-Date" value="20231112T000000Z" />
<input type="input" name="x-amz-meta-tag" value="" /><br />
<input type="hidden" name="Policy" value="<my policy base64" />
<input type="hidden" name="X-Amz-Signature" value="<my policy signature>" />
<input type="file" name="file" accept="image/png" /> <br />
<!-- The elements after this will be ignored -->
<input type="submit" name="submit" value="Upload to Amazon S3" />
</form>
</body>
</html>
AWS OFFICIALUpdated 10 months ago
