Put file API -> S3 / cors error
Hi, i want to upload file (pdf) form my site to S3 using API i have configured everything IAM role and policy
When i try to uplod file from POSTMAN - everything works fine, file was uploaded
but when i try do this from my index.html i get this error
Can anyone tell me what im doing wrong ?
or any other method to do this ?
this is my html
<!DOCTYPE html>
<html>
<head>
<title>Przesyłanie pliku</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="uploadFile()">Wyślij plik</button>
<script>
function uploadFile() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/pdf");
var requestOptions = {
method: 'PUT',
headers: myHeaders,
body: file,
redirect: 'follow'
};
fetch("https://v9j07k5dj0.execute-api.eu-central-1.amazonaws.com/dev/umarzamy-chf-upload/file.pdf", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
</script>
</body>
</html>
- Newest
- Most votes
- Most comments
Yes i have enabled CORS in API settings.
and when i upload html as static site - erros is the same
Thanks for your replies. I tried different combinations but still the same error. I'm a beginner, so maybe in the future I will approach the topic again.
At the moment I found a solution to upload a file using presign url
I made a few changes and now I can upload .pdf files with a predefined file name without any problems.
Thanks again for your commitment.
You are probably using API Gateway, have you enabled CORS?
Without this setting, access from index.html would result in an error.
https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html
There are few things here:
-
The error indicates that the origin is
null. This happens when you try to open a file locally in the browser, for example by double clicking it or loading it withfile://. You'll need to load the file from a local web server in order to test the upload functionality, and allowlocalhostin the CORS settings in the API Gateway. There are many ways to run a local web server, and your IDE may also have this capability built-in. The mozilla developer's network has more information on this. -
If you have uploaded this page to a web server you should allow that domain in your CORS allow list.
-
You need to use
FormData()to upload your file, because thebodyshould have the binary contents of the file. Note in your postman screenshot thatbinaryis selected underBody. See this example that usesfetchto upload files.
Relevant content
- Accepted Answerasked 2 years ago
- Accepted Answerasked 2 years ago
AWS OFFICIALUpdated 9 months ago- AWS OFFICIALUpdated a year ago
- AWS OFFICIALUpdated 2 years ago
- AWS OFFICIALUpdated a year ago
The following document describes common troubleshooting methods when CORS occurs with API Gateway. Please check once. https://repost.aws/knowledge-center/api-gateway-cors-errors Would it be possible to share a screenshot of the API Gateway CORS configuration screen? I was wondering if the required method (PUT) is allowed.