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 Respostas
1

Yes i have enabled CORS in API settings.

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

michal
respondido há um ano
0
Resposta aceita

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
respondido há um ano
profile picture
ESPECIALISTA
avaliado há 6 meses
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
ESPECIALISTA
respondido há um ano
profile picture
ESPECIALISTA
avaliado há um ano
  • 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.

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
respondido há um ano

Você não está conectado. Fazer login para postar uma resposta.

Uma boa resposta responde claramente à pergunta, dá feedback construtivo e incentiva o crescimento profissional de quem perguntou.

Diretrizes para responder a perguntas