Uploadify 3.1 Trying to Upload to Amazon S3 (SignatureDoesNotMatch)

Question

Here is some background
http://www.uploadify.com/documentation/
http://aws.amazon.com/articles/1434/

I have been struggling with Uploadify to Amazon S3 for a greater part of 3 days now. This was my first torture (HTTP 400 ERROR - MaxPostPreDataLengthExceeded) Uploadify 3.1

I recently fixed it by realizing i needed this in the uploadify call

"fileObjName": "file",

But now the a 403 Error.

SignatureDoesNotMatch The request signature we calculated does not match the signature you provided. Check your key and signing method.

This 403 error is the bane of my existence. From searching around it would seem I am messing up the Conditions in my Policy Document. Here is the facts

On the html page:

<p>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#file').uploadify(
            {
                "formData": {"AWSAccessKeyId": "AKIAJOVJ2J3JX5Z6AIKA", "bucket": "my-stupid-bucket", "acl": "private", "key": "uploads/${filename}",
                "signature": "2I0HPQ2SoZOmhAUhYEb4nANFSCQ%253D",
                "policy": "eyJleHBpcmF0aW9uIjogIjIwMTItMDUtMDRUMjE6Mzk6MDJaIiwgImNvbmRpdGlvbnMiOiBbeyJidWNrZXQiOiAicmVrZWVwcy1yZWNlaXB0LXVzLTEiIH0sIFsic3RhcnRzLXdpdGgiLCAiJFVwbG9hZCIsICJTdWJtaXQgUXVlcnkiXSwgeyJhY2wiOiAicHJpdmF0ZSIgfSwgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVwbG9hZHMvJHtmaWxlbmFtZX0iXSwgWyJzdGFydHMtd2l0aCIsICIkRmlsZW5hbWUiLCAiIl0sIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICIiXV19"},
                "fileObjName": "file",
                "uploader": "http://my-stupid-bucket.amazonaws.com",
                "swf": "/static/uploadify/uploadify.swf"
            }
        );
    });
    </script>

    <div id="file" class="uploadify" style="height: 30px; width: 120px; ">
    <object id="SWFUpload_0" type="application/x-shockwave-flash" data="/static/uploadify/uploadify.swf?preventswfcaching=1336228509904" width="120" height="30" class="swfupload" style="position: absolute; z-index: 1; "><param name="wmode" value="transparent"><param name="movie" value="/static/uploadify/uploadify.swf?preventswfcaching=1336228509904"><param name="quality" value="high"><param name="menu" value="false"><param name="allowScriptAccess" value="always"><param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=http%3A%2F%2Fmy-stupid-bucket.amazonaws.com&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;assumeSuccessTimeout=30&amp;params=AWSAccessKeyId%3DAKIAJOVJ2J3JX5Z6AIKA%26amp%3Bbucket%3Dmy-stupid-bucket%26amp%3Bacl%3Dprivate%26amp%3Bkey%3Duploads%252F%2524%257Bfilename%257D%26amp%3Bsignature%3D2I0HPQ2SoZOmhAUhYEb4nANFSCQ%2525253D%26amp%3Bpolicy%3DeyJleHBpcmF0aW9uIjogIjIwMTItMDUtMDRUMjE6Mzk6MDJaIiwgImNvbmRpdGlvbnMiOiBbeyJidWNrZXQiOiAicmVrZWVwcy1yZWNlaXB0LXVzLTEiIH0sIFsic3RhcnRzLXdpdGgiLCAiJFVwbG9hZCIsICJTdWJtaXQgUXVlcnkiXSwgeyJhY2wiOiAicHJpdmF0ZSIgfSwgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVwbG9hZHMvJHtmaWxlbmFtZX0iXSwgWyJzdGFydHMtd2l0aCIsICIkRmlsZW5hbWUiLCAiIl0sIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICIiXV19&amp;filePostName=file&amp;fileTypes=*.*&amp;fileTypesDescription=All%20Files&amp;fileSizeLimit=0&amp;fileUploadLimit=0&amp;fileQueueLimit=999&amp;debugEnabled=false&amp;buttonImageURL=%2Fscratchpad%2F&amp;buttonWidth=120&amp;buttonHeight=30&amp;buttonText=&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=0&amp;buttonTextStyle=color%3A%20%23000000%3B%20font-size%3A%2016pt%3B&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-2"></object>

    <div id="file-button" class="uploadify-button " style="height: 30px; line-height: 30px; width: 120px; ">
        <span class="uploadify-button-text">SELECT FILES</span>
    </div>
    </div>

    <div id="file-queue" class="uploadify-queue"></div>
</p>

The Policy Document:

{"expiration": "2012-05-04T21:39:03Z",
    "conditions": [
        {"bucket": "my-stupid-bucket" },
        ["starts-with", "$Upload", ""],
        {"acl": "private" },
        ["starts-with", "$key", "uploads/${filename}"]
        ["starts-with", "$Filename", ""],
        ["starts-with", "$Content-Type", ""]
    ]
}

The Request:

POST / HTTP/1.1
Host: my-stupid-bucket.s3.amazonaws.com
User-Agent: Adobe Flash Player 11
Content-Length: 44914
x-flash-version: 11,2,202,235
Accept-Types: text/*
Content-Type: multipart/form-data; boundary=----------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Connection: close

------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="Filename"

yWxh1.jpg
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="acl"

private
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="signature"

OZBMi4oaUAz2p67wZYWo87qFVaQ%253D
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="AWSAccessKeyId"

AKIAJOVJ2J3JX5Z6AIKA
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="key"

uploads/${filename}
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="bucket"

my-stupid-bucket
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="policy"

eyJleHBpcmF0aW9uIjogIjIwMTItMDUtMDRUMjI6MTc6MDZaIiwgImNvbmRpdGlvbnMiOiBbeyJidWNrZXQiOiAicmVrZWVwcy1yZWNlaXB0LXVzLTEiIH0sIFsic3RhcnRzLXdpdGgiLCAiJFVwbG9hZCIsICIiXSwgeyJhY2wiOiAicHJpdmF0ZSIgfSwgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVwbG9hZHMvJHtmaWxlbmFtZX0iXSwgWyJzdGFydHMtd2l0aCIsICIkRmlsZW5hbWUiLCAiIl0sIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICIiXV19
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="file"; filename="yWxh1.jpg"
Content-Type: application/octet-stream


blah blah blah  <--- content stream stuff


------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0
Content-Disposition: form-data; name="Upload"

Submit Query
------------KM7gL6cH2ei4ae0KM7Ij5KM7ae0ae0--

The Error:

<Error>
    <Code>SignatureDoesNotMatch</Code>
    <Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>
    <StringToSignBytes>65 79 4a 6c 65 48 42 70 63 6d 46 30 61 57 39 75 49 6a 6f 67 49 6a 49 77 4d 54 49 74 4d 44 55 74 4d 44 52 55 4d 6a 49 36 4d 54 63 36 4d 44 5a 61 49 69 77 67 49 6d 4e 76 62 6d 52 70 64 47 6c 76 62 6e 4d 69 4f 69 42 62 65 79 4a 69 64 57 4e 72 5a 58 51 69 4f 69 41 69 63 6d 56 72 5a 57 56 77 63 79 31 79 5a 57 4e 6c 61 58 42 30 4c 58 56 7a 4c 54 45 69 49 48 30 73 49 46 73 69 63 33 52 68 63 6e 52 7a 4c 58 64 70 64 47 67 69 4c 43 41 69 4a 46 56 77 62 47 39 68 5a 43 49 73 49 43 49 69 58 53 77 67 65 79 4a 68 59 32 77 69 4f 69 41 69 63 48 4a 70 64 6d 46 30 5a 53 49 67 66 53 77 67 57 79 4a 7a 64 47 46 79 64 48 4d 74 64 32 6c 30 61 43 49 73 49 43 49 6b 61 32 56 35 49 69 77 67 49 6e 56 77 62 47 39 68 5a 48 4d 76 4a 48 74 6d 61 57 78 6c 62 6d 46 74 5a 58 30 69 58 53 77 67 57 79 4a 7a 64 47 46 79 64 48 4d 74 64 32 6c 30 61 43 49 73 49 43 49 6b 52 6d 6c 73 5a 57 35 68 62 57 55 69 4c 43 41 69 49 6c 30 73 49 46 73 69 63 33 52 68 63 6e 52 7a 4c 58 64 70 64 47 67 69 4c 43 41 69 4a 45 4e 76 62 6e 52 6c 62 6e 51 74 56 48 6c 77 5a 53 49 73 49 43 49 69 58 56 31 39</StringToSignBytes>
    <RequestId>5C360649B9B97C0C</RequestId>
    <HostId>zT+9IaqTw/RAWwJH8KwCmGJZ6Wydq1/hg0v55TL8acHPX5ZMQvU2T4mbTF9wHD15</HostId>
    <SignatureProvided>OZBMi4oaUAz2p67wZYWo87qFVaQ%253D</SignatureProvided>
    <StringToSign>eyJleHBpcmF0aW9uIjogIjIwMTItMDUtMDRUMjI6MTc6MDZaIiwgImNvbmRpdGlvbnMiOiBbeyJidWNrZXQiOiAicmVrZWVwcy1yZWNlaXB0LXVzLTEiIH0sIFsic3RhcnRzLXdpdGgiLCAiJFVwbG9hZCIsICIiXSwgeyJhY2wiOiAicHJpdmF0ZSIgfSwgWyJzdGFydHMtd2l0aCIsICIka2V5IiwgInVwbG9hZHMvJHtmaWxlbmFtZX0iXSwgWyJzdGFydHMtd2l0aCIsICIkRmlsZW5hbWUiLCAiIl0sIFsic3RhcnRzLXdpdGgiLCAiJENvbnRlbnQtVHlwZSIsICIiXV19</StringToSign>
    <AWSAccessKeyId>AKIAJOVJ2J3JX5Z6AIKA</AWSAccessKeyId>
</Error>

At this point it must be something I just am not seeing. Can someone out there in the internet world please save me from the padded room?

Answer 1

try remove

["starts-with", "$Upload", ""],
["starts-with", "$Content-Type", ""] 

from policy. form data must match to policy. (except $Filename which created by Flash)

I have succeed upload files to S3 via uploadify 3.1

here is my code:

 jQuery('#file_upload').uploadify({
            'formData'      : {
            'AWSAccessKeyId': '<?= AWS_ACCESS_KEY ?>',
            "acl": "private", 
            "key": "<?= $blog ?>/${filename}",
            "signature": "<?= $signature ?>",
            "policy": "<?= $policy ?>",
            "success_action_status": "201"
        },
        "fileObjName":"file",
        'swf'      : '/js/uploadify/uploadify.swf',
        'scriptAccess' : 'always',
        'uploader' : 'http://s3.amazonaws.com/<?= AWS_S3_BUCKET ?>',
        'buttonText' : 'Browse',
        'width' : 120,
        'height': 30,
        'multi' : false,
        'onUploadError' : function(file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
        },
...

and this is my policy:

        return base64_encode(
        '{'.
            '"expiration": "'.gmdate('Y-m-d\TH:i:s\Z', time()+60*60*24+intval(@$data['timestamp'])).'",'.
            '"conditions": '.
            '['.
                '{"bucket": "'.$data['bucket'].'"},'.
                '{"acl": "private"},'.
                '{"success_action_status": "201"},'.
                '["starts-with","$key",""],'.
                '["starts-with","$Filename",""],'.
                '["content-length-range",0,5242880]'.
            ']'.
        '}'
    );

Hope this would help you.