title: Javascript not working when uploading file to AWS S3 via presigned URL
body: <p>I generate a pre-signed URL for uploading files to AWS S3 via a Python-backed API. This part receives filename info once the user selects the file in a browser (see below), and returns a JSON payload (see below) with the base URL and fields.</p>
  <pre class="lang-py prettyprint-override"><code>import logging
  import boto3
  from botocore.exceptions import ClientError
  
  
  def create_presigned_post(bucket_name, object_name,
                            fields=None, conditions=None, expiration=3600):
  
      # Generate a presigned S3 POST URL
      s3_client = boto3.client('s3')
      try:
          response = s3_client.generate_presigned_post(bucket_name,
                                                       object_name,
                                                       Fields=fields,
                                                       Conditions=conditions,
                                                       ExpiresIn=expiration)
      except ClientError as e:
          logging.error(e)
          return None
  
      # The response contains the presigned URL and required fields
      return response
  
  </code></pre>
  <p>Here's the JSON response I get from this function. (I changed/abbreviated some of the values, but you get the point.)</p>
  <pre class="lang-py prettyprint-override"><code>{
    &quot;url&quot;: &quot;https://s3.us-east-2.amazonaws.com/my_bucket_name&quot;,
    &quot;fields&quot;: {
      &quot;key&quot;: &quot;some.txt&quot;,
      &quot;AWSAccessKeyId&quot;: &quot;ASI...&quot;,
      &quot;x-amz-security-token&quot;: &quot;Ag9o...&quot;,
      &quot;policy&quot;: &quot;eyJ...=&quot;,
      &quot;signature&quot;: &quot;jn...=&quot;
    }
  }
  </code></pre>
  <p>Here's the HTML form that I'm using to upload the file. I have some vanilla Javascript that tracks changes to the form and updates the <code>URL_VALUE</code> for the form and the <code>VALUE</code> for each form item upon changes (e.g. file selection).</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- Copy the 'url' value returned by S3Client.generate_presigned_post() --&gt;
      &lt;form action=&quot;URL_VALUE&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
        &lt;!-- Copy the 'fields' key:values returned by S3Client.generate_presigned_post() --&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;key&quot; value=&quot;VALUE&quot; /&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;AWSAccessKeyId&quot; value=&quot;VALUE&quot; /&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;policy&quot; value=&quot;VALUE&quot; /&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;signature&quot; value=&quot;VALUE&quot; /&gt;
      File:
        &lt;input type=&quot;file&quot;   name=&quot;file&quot; /&gt; &lt;br /&gt;
        &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Upload to Amazon S3&quot; /&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>This HTML form works fine by itself, but I tried adding some Javascript (both vanilla and JQuery), so I can track file progress and disable form inputs until the upload is complete.</p>
  <p><strong>I can't get Javascript to work!!!</strong></p>
  <p>I have tried so many examples (again, both vanilla JS and JQuery).</p>
  <p>Has anyone recently implemented this and can help?</p>