title: AWS 403 Forbidden when attempting client side post
body: <p>I'm currently trying to set up client-side uploading to my bucket via the <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow">blueimp</a> library and <a href="http://pjambet.github.io/blog/direct-upload-to-s3/" rel="nofollow">this</a> more up to date tutorial for the setup.</p>
  
  <p>I seem to be constructing the signature incorrectly but how I'm doing so is beyond me. If someone would be willing to lend a fresh pair of eyes it'd be much appreciated.</p>
  
  <p>Also the exact response is "SignatureDoesNotMatchThe request signature we calculated does not match the signature you provided. Check your key and signing method"</p>
  
  <p>PHP API where signature is generated</p>
  
  <pre><code>        $policy = base64_encode(
       preg_replace("/\n|\r/", "",
          json_encode(
  
                  array(
                      "expiration" =&gt; $expires,
                      "bucket" =&gt; $S3_BUCKET, 
                      "acl" =&gt; "public-read",
                      "starts-with" =&gt; $object_name,
                      "success_action_status" =&gt; "201"
                  )
              )
          ) 
      );
  
      //$policy = preg_replace("/\n|\r/", "", $policy);
  
      $signature = base64_encode(
              hash_hmac(
                  'sha1', 
                  $config-&gt;aws_secret,
                  $policy
              )
  
      );
  
      $signature = preg_replace("/\n/", "", $signature);
  
      $awsAccessInfo = array(
          "signature" =&gt; $signature, 
          "aws_key" =&gt; $AWS_ACCESS_KEY, 
          "policy" =&gt; $policy, 
          "bucket" =&gt; $S3_BUCKET,
              "key" =&gt; $AWS_ACCESS_KEY
      );
  
      return $this-&gt;getResponse()-&gt;json($awsAccessInfo);
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.direct-upload').each(function() {
  
      var form = $(this);
      $(this).fileupload({
        url: form.attr('action'),
        type: 'POST',
        autoUpload: true,
        dataType: 'xml', // This is really important as s3 gives us back the url of the file in a XML document
        add: function (event, data) {
                  console.log(data.files[0].name);
          $.ajax({
            url: "http://api/sign_request_s3?allowOrigin=1",
            type: 'GET',
            dataType: 'json',
            data: { s3_object_name: data.files[0].name}, // send the file name to the server so it can generate the key param
            async: false,
            success: function(data) {
  
              // Now that we have our data, we update the form so it contains all
              // the needed data to sign the request
                          console.log("Key: " + data.aws_key + " Signature: " + data.signature);
              form.find('input[name=key]').val(data.aws_key);
                          form.find('input[name=AWSAccessKeyId]').val(data.aws_key);
              form.find('input[name=policy]').val(data.policy);
              form.find('input[name=signature]').val(data.signature);
            }
          });
          data.submit();
        },
        send: function(e, data) {
          $('.progress').fadeIn();
                  console.log("sending...");
        },
        progress: function(e, data){
          // This is what makes everything really cool, thanks to that callback
          // you can now update the progress bar based on the upload progress
          var percent = Math.round((e.loaded / e.total) * 100)
          $('.bar').css('width', percent + '%')
        },
        fail: function(e, data) {
          console.log('failed');
  
        },
        success: function(data) {
          // Here we get the file url on s3 in an xml doc
          var url = $(data).find('Location').text()
                  console.log('success');
          $('#real_file_url').val(url) // Update the real input in the other form
        },
        done: function (event, data) {
          $('.progress').fadeOut(300, function() {
            $('.bar').css('width', 0)
          })
        },
      })
    })
  </code></pre>