- Newest
- Most votes
- Most comments
thank you but I have already the presigned url (with postman work correctly), my presigned url has this form:
https://my-bucket.s3.amazonaws.com/immage.png? X-Amz-Algorithm=AWS4-HMAC-SHA256& X-Amz-Credential=ASIA5FPAP6OKGJZUPSGB%2F20230402%2Feu-west-1%2Fs3%2Faws4_request& X-Amz-Date=20230402T212500Z& X-Amz-Expires=180& X-Amz-SignedHeaders=host& X-Amz-Security-Token=IQoJb3JpZ2luX2VjEO7%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCWV1LXdlc3QtMSJIMEYCIQDdEAuDddeae%2BQcKLyFT8dGLRp0vp37vFLJZwzZhTb2BAIhAJXIXvjy8ZegRiMctoJva2YORROUOEmnlqtHJ7%2BchanIKvsCCMb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQARoMOTA1MDk4Mjk0MTY0Igwdqj4opphPo1tmeGoqzwI1VpSf5w8elnFZN%2FiXVU5hJtysw9BmCtZmRPFi7jXsiOcWVVTmeqjeGRBJcThF%2FjNSlRTUDeruF%2BWTLmEKI%2BYxyauAn6aIlCJddPovxgUONyn9%2FfkQ%2BBSRjTeJmtjmILlhPbQy1nXHZTfTKvDjvuK9VsUoKN6OnzbAueW5YXx4%2BoapUxmHa51nG%2FIL92Ej1R%2FTF7f1mdlinToz0LdM9spzph0d5gUXHEat8bV%2BMfwtMGyI4Kt48ddndu%2BHmBay18%2Bq84geSwkCWJofQnVRQzf8s%2B3RpIieRkMaB24OB2lawuz2ml3BitUmz87NTQ5Cwrzq29BH33oH31Q9GcdccaURATIOlSPV%2FKDNoY251WA8pmbwsnD7ZUus9yRkx6NXStM0gpqaKZ9ENtEgzrtbzy06N70jcL8ihoyieJKAV5jXiU0gQqpi7a%2F2ntppbF9XyzCS4qehBjqdAT%2BWp7e10U5uX%2FV8E82tKfQwGi6BazQE2NTHti8tvoeWxVmWKMMdXRHOPmToE3STEnS2J2WtJGxoypI18fq0hVm4dOTsWxEJgAaQceT9aalJt6w5%2Frc380NacUAOMZgeQoWMmj3PJ9WEJ%2BExG6b%2Fha%2BoV2AnMHerNe8ck07Shchbs7bT0kuutZQF90sM6spoK%2Bk8QKmY%2BexsQRscKeM%3D& X-Amz-Signature=2d5392ce973f34e5097e4b0b24bcc965317528f5e0bf5567b12e3b183a158874
I use this presigned url to compose my form data, as you can see in the my presigned url is not present an access token. what do you mean by access token? the presigned url should already be complete like this.
This is postman with the same url:
this is my form submitted:
Postman is put and has the variable as params mentre my form is post but i followed this guide "https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html" if i try to modify my form in put i obtain another error:
The pre-signed URL and the actual S3 call have to match exactly in terms of parameters. That error is saying that there is a header or other parameter which is either being supplied and isn't in the pre-signed URL; or it is in the pre-signed URL and isn't being supplied in the API call.
Here's some (lightly edited) code that I use - it's jQuery-based but I think it should make sense:
const file = $('#uploadfile');
fileObject = file.prop('files')[0];
var reader = new FileReader();
reader.readAsArrayBuffer(fileObject);
reader.onload = function() {
formData = {'name':fileObject.name, 'contentType':fileObject.type};
$.post({
url: apiEndpoint+'getUploadToken',
headers: {'token':accessToken}, // accessToken is not relevant, it's just a way to get the presigned URL
data: JSON.stringify(formData),
dataType: 'json'
}).then(function(url) { // getUploadToken returns the presigned URL
$.ajax({
type: 'PUT',
url: url,
processData: false,
contentType: fileObject.type,
data: reader.result
}).then(function(s3data) {
// Success
}).fail(function(s3data) {
// Upload fail
});
}).fail(function(data) {
// getUploadToken fail
});
I fixed it with a javascript function and adding this " "AllowedOrigins": ["*"]" to the CORS configuration. So I do the "submit" from the javascript function, evidently the html form differed in something.
<script>
const imageForm = document.querySelector("#imageForm")
const imageInput = document.querySelector("#imageInput")
imageForm.addEventListener("submit", async event => {
event.preventDefault()
const file = imageInput.files[0]
var url = ""
//retrieve presigned url
await fetch('<api gateway that return presigned URL>',{
method: 'POST',
headers: {
'Accept': 'application/json, text/plain, */*',
'Access-Control-Allow-Origin':'*',
'Content-Type': 'application/json'
},
body: JSON.stringify({fileName:file.name})
}).then(res => res.json())
.then(res => {url=res.url})
// post the file direclty to the s3 bucket
await fetch(url, {
method: "PUT",
headers: {'Content-Type':'application/json',
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'POST,PATCH,OPTIONS'},
body: file
})
const imageUrl = url.split('?')[0]
location.reload();
})
</script>
Relevant content
- Accepted Answerasked 2 years ago
- asked 6 months ago
- AWS OFFICIALUpdated 10 months ago
- AWS OFFICIALUpdated 8 months ago
- AWS OFFICIALUpdated a year ago
In my code,
accessToken
is how I authenticate to my service to get a presigned URL. You can ignore it - it isn't important in this example, it's just a way to get the presigned URL. If your URL is working in Postman and not in your code then you need to find out what the code is doing differently to Postman.