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?

score 1 · Answer 1 · answered Nov 15 '12 at 03:46

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.

Thanks so much for this comment, it finally led me to a working solution! — latortuga, Dec 07 '12 at 21:19

score 0 · Answer 2 · answered Aug 16 '12 at 23:16

Was researching my own (now resolved problem), and found this question via http://www.uploadify.com/forum/#/discussion/1416/uploading-to-amazon-s3/p1

That very thread got me running a little over a year ago, but I have recently started experiencing problems with Chrome 21/win.

Your code run through http://jsbeautifier.org/

$(document).ready(function () {
    $('#file').uploadify({
        "formData": {
            "AWSAccessKeyId": "AKIAJOVJ2J3JX5Z6AIKA",
            "bucket": "my-stupid-bucket",
            "acl": "private",
            "key": "uploads/${filename}",
            "signature": "2I0HPQ2SoZOmhAUhYEb4nANFSCQ%253D",
            "policy": "[... snip ...]"
        },
        "fileObjName": "file",
        "uploader": "http://my-stupid-bucket.amazonaws.com",
        "swf": "/static/uploadify/uploadify.swf"
    });
});

I just upgraded to uploadify 3.1 and ran into similar invalid signature problems. The answer seems to be that the code in that thread is simply outdated.

IIRC, that thread states you should encodeURIComponent the signature/etc. This is no longer the case, it seems. My 2.x code is working with 3.1 without encoding the signature and policy. Guessing this was some workaround to an uploadify/flash problem that has since been resolved.

Additionally, it looks like your signature is double URL encoded.

TL;DR;
Don't encodeURIComponent your form data with uploadify 3.1 (and possibly earlier versions).

score 0 · Answer 3 · answered Apr 03 '13 at 20:43

z33's answer worked for me as well, but I wanted to keep Content-Type. Here's my work-around. In the 'formData' block, add:

"content-type" : "video/mp4"

In the policy, also add:

'{"content-type": "video/mp4"}

I noticed both must match, or else the upload will fail. You could add a class for the content-type selector for different file types, but I didn't get around to it.

Here is my sample: formData

'formData'  : {
               "AWSAccessKeyId"         : "<?= S3::$AWS_ACCESS_KEY ?>",
               "key"                : "${filename}",
               "acl"                : "public-read",
               "content-type"                       : "video/mp4",
               "policy"                             : "<?= $policy ?>",
               "signature"              : "<?= $signature ?>",
               "success_action_status"      : "201"
              }

policy:

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

score -3 · Answer 4 · answered May 05 '12 at 16:03

-3

Why wouldn't you have a serverside parser between uploadify and amazon? This way you're giving the clientside browser too much information that it really shouldn't have anyway.

answered May 05 '12 at 16:03

Blazedd

20
2

I'm not sure i follow? Too much information? The client embedded info doesn't have anything anyone can do anything with. – Christopher Jean-Marie Trudel May 05 '12 at 16:51
This isn't as much of an answer as it is a comment. And client -> s3 makes tons of sense. If you put something to process uploads in between your client and s3 -- why use s3 in the first place? – Cory Mawhorter Aug 16 '12 at 22:28
1

Putting the AWSAccessKeyId in client-side code is fine - we're not revealing the secret here. Sending a public keyID + signed request is also fine - the AWS server uses the public key ID to look up your secret key (it knows it too) and generates a check signature using the same logic. What is crucial, though is that you generate your signature on your _server_ (and not on the client) to keep the secret, well, secret – Steve Jalim Nov 30 '12 at 17:33

Uploadify 3.1 Trying to Upload to Amazon S3 (SignatureDoesNotMatch)

4 Answers4