title: POST 400 bad request when uploading file to S3 using Lambda and API Gateway using static website
body: <p>I have been following the tutorial (<a href="https://www.youtube.com/watch?v=IDoEERbTQm4" rel="nofollow noreferrer">https://www.youtube.com/watch?v=IDoEERbTQm4</a>) in order to upload files using a static S3 file in conjunction with API gateway and Lambda. I have followed all the steps as illustrated in the tutorial, however, when writing to the file I keep getting 'POST 400 bad request'.</p>
  <p>I have ensured to specify datatype as JSON and JSON.stringify the data but the error seems to still persist. The code snippets are below but the site can be viewed on <a href="https://transcriberbucket1.s3.amazonaws.com/index.html" rel="nofollow noreferrer">https://transcriberbucket1.s3.amazonaws.com/index.html</a></p>
  <pre><code>/*
  Function called when the GET Object Event Button is triggered.
  Images will be loaded automaticaly at the bottom div, For files, it will just show a null image icon(which is an error, if you have time fix it)
  */
  
  $(document).ready(function() {
      $(&quot;#UrlSignerBtnId&quot;).click(function() {
          $.ajax({
              url: 'https://ze451btvv2.execute-api.eu-west-2.amazonaws.com/prod',
              type: 'POST',
              contentType: &quot;application/json; charset=utf-8&quot;,
              data: JSON.stringify({
                  &quot;BucketName&quot;: $('#BucketNameId').val(),
                  &quot;ObjectName&quot;: $('#ObjectNameId').val(),
                  &quot;methodType&quot;: $('#methodTypeId option:selected').attr('value'),
              }, ),
              dataType: &quot;json&quot;,
              //beforeSend: function(){ $( '#loader' ).show();},
              success: function(res) {
                  $(&quot;#urlTextId&quot;).html(&quot;Your &lt;a href=&quot; + res.PreSignedUrl + &quot;&gt;Pre-Signed Url&lt;/a&gt; expires in &quot; + res.ExpiresIn +&quot; Seconds&quot;);
                  $(&quot;#SignedUrlId&quot;).html(&quot;&lt;img src='&quot; + res.PreSignedUrl + &quot;'&gt;&quot;);
                  $(&quot;#div-obj-holderId&quot;).show();
              },
              error: function(e) {
                  $(&quot;#urlTextId&quot;).html(&quot;Unable to Retrieve Image, Check Object Key name.&quot;);
                  $(&quot;#SignedUrlId&quot;).html(&quot;&lt;i&gt;&quot;+ e.responseText + &quot;&lt;/i&gt;&quot;);
                  $(&quot;#div-obj-holderId&quot;).show();
              },
              // complete: function() { $('#loader').hide(); }
          });
      });
  });
  
  /*
  Function called when the Upload Object Event Button is triggered.
  Gets the Pre-Signed Upload Url and Triggers the Upload Function
  */
  $(document).ready(function() {
      $(&quot;#ObjectUploadBtnId&quot;).click(function() {
          $.ajax({
              url: 'https://ze451btvv2.execute-api.eu-west-2.amazonaws.com/prod',
              type: 'POST',
              contentType: &quot;application/json; charset=utf-8&quot;,
              data: JSON.stringify({
                  &quot;BucketName&quot;: $('#BucketNameId').val(),
                  &quot;methodType&quot;: $('#methodTypeId option:selected').attr('value'),
                  &quot;FileName&quot;: $('#FileNameId').val()
              }, ),
              dataType: &quot;json&quot;,
              //beforeSend: function(){ $( '#loader' ).show();},
              success: function(res) {
                  uploadFile(res, res.url);
              },
              error: function(e) {
                  $(&quot;#urlTextId&quot;).html(&quot;Failed: Unable to Get Signed Upload Url&quot; + e.responseText);
                  $(&quot;#SignedUrlId&quot;).html(&quot;&quot;);
                  $(&quot;#div-obj-holderId&quot;).show();
              },
              complete: function() {
                  $('#loader').hide();
              }
          });
      });
  });
  
   
  </code></pre>