Geek asks and answers

Uploadify 3.1 Attempting to upload to Amazon S3 (SignatureDoesNotMatch)

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

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

I recently fixed this, realizing that I need it in an uploaded call

"fileObjName": "file",

But now error 403.

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

This 403 error is the curse of my existence. From searching around this, it would seem, I messed up the Terms in my Political Document. Here are 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>


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", ""]
    ]
}


Inquiry:

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--


:

<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>


, . - -, , ?

+5
4

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

. . ( $Filename, Flash)

S3 uploadify 3.1

:

 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);
        },
...

:

        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]'.
            ']'.
        '}'
    );

, .

+1

( ) http://www.uploadify.com/forum/#/discussion/1416/uploading-to-amazon-s3/p1

, Chrome 21/win.

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"
    });
});

3.1 . , , , .

IIRC, , URIComponent /etc. , . 2.x 3.1 . , /-, .

, , URL-.

TL; DR;
URIComponent uploadify 3.1 (, , ).

0

z33 , Content-Type. . 'formData' :

"content-type" : "video/mp4"

:

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

I noticed that both should match, otherwise the download will fail. You could add a class for the content type selector for different file types, but I did not get along with it.

Here is my example: FormData p>

'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]'.
            ']'.
        '}'
    );
0
source

Why don't you have a parser-parser between uploadify and amazon? Thus, you provide the client browser with too much information, which it really should not have in any case.

-3
source

More articles:


All Articles