Upload to AWS s3 Error: "NetworkingError: Network Failure"

5.4k views Asked by At

I am running code to upload files to an s3 bucket; however the code returns this error when run: "NetworkingError: Network Failure" I have done some searching for fixes but none that I have found have worked so far. The code is in an HTML element.

Here is my code:

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js">
</script>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>

<script type="text/javascript">


function sendLoadMessage () {

window.parent.postMessage("LoadOk1", "*");

}
function postMsg(msg) {
   window.parent.postMessage(msg, "*");
}

const BUCKET_NAME = 'EXAMPLE_BUCKET';
const IAM_USER_KEY = 'EXAMPLE_KEY';
const IAM_USER_SECRET = 'EXAMPLE_SECRET_KEY'; 

function Send() {

    var files = document.getElementById('fileUpload').files;
    let In = files[0]
    console.log("In", In)


    uploadToS3(In)

    function uploadToS3(file) {

      let s3bucket = new AWS.S3({
          accessKeyId: IAM_USER_KEY,
          secretAccessKey: IAM_USER_SECRET,
          Bucket: BUCKET_NAME
      });

      s3bucket.createBucket(function () {

          var params = {
              Bucket: BUCKET_NAME,
              Key: "New",
              Body: In
          };
          s3bucket.upload(params, function (err, data) {
              if (err) {
              console.log('error in callback');
              console.log(err);

              }
              console.log('success');
              console.log(data);

          });
      });
    }

} 
</script>

<div>        
   <input type="file" id="fileUpload">    
</div>    
<div> 
   <button class="button" onclick="Send()">Submit</button>    
</div>  
  

<body onload="sendLoadMessage ();" style="background-color:white;">

<div id="GoogleSheetsDocs"></div>

</body>

Here is my current CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

I have tried changing my CORS and having the file sent into a folder in the bucket and neither have worked. Does anyone know how I can get it to work?

0

There are 0 answers