Put file API -> S3 / cors error

0

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 Enter image description here

but when i try do this from my index.html i get this error

Enter image description here

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>
4 個答案
1

Yes i have enabled CORS in API settings.

and when i upload html as static site - erros is the same

michal
已回答 1 年前
0
已接受的答案

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

https://aws.amazon.com/blogs/compute/uploading-to-amazon-s3-directly-from-a-web-or-mobile-application/

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.

michal
已回答 1 年前
profile picture
專家
已審閱 6 個月前
0

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

profile picture
專家
已回答 1 年前
profile picture
專家
已審閱 1 年前
0

There are few things here:

  1. 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 with file://. You'll need to load the file from a local web server in order to test the upload functionality, and allow localhost in 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.

  2. If you have uploaded this page to a web server you should allow that domain in your CORS allow list.

  3. You need to use FormData() to upload your file, because the body should have the binary contents of the file. Note in your postman screenshot that binary is selected under Body. See this example that uses fetch to upload files.

profile pictureAWS
已回答 1 年前

您尚未登入。 登入 去張貼答案。

一個好的回答可以清楚地回答問題並提供建設性的意見回饋,同時有助於提問者的專業成長。

回答問題指南