Jquery から S3にアップロード

phpから自鯖経由してアップロードすると$_FILEに上がってしまうので
リソースをくってしまうし、データ送信連打されるとたとえ連続投稿で弾いたとしても、
$_FILEにはあがってしまうわけで、ファイルアップロード分だけリソースがくわれてしまう。ぐぬぬ

ってことで直接S3に上げれば、代わりにAmazonさんが頑張ってくれるはずってことで
formのアクションにアマゾンURLをいれて、ファイルアップロードできるようした。
これを参考にした！
http://www.slideshare.net/suzlab/untitled-10619108?ref=http://blog.cloudpack.jp/2011/12/aws-news-jaws-ug-miyazaki-03-lt.html
http://aws.amazon.com/articles/1434

が！！！

ファイルアップロードだけならいいけども、コメントにファイルアップロードをつけたい場合
これだとformの送信先がアマゾンになってしまうので、コメントのデータが帰ってこない！
アマゾンに送信時にコールバックURLをぐにゅぐにゅ操作したけども
policy,signature でアウトー。

ということで、Jquery　uploadify　から直接S３にファイルアップロードできるにし、
完了時にアマゾンのKEYを拾えるようにした。
http://qiita.com/kitar/items/da80bd97b3ad63365126
を参考し、いろいろパラメータとかいじった。
uploadifyをつかるようにbucketのルートに以下をアップロード。

crossdomain.xml

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
  <allow-access-from domain="*" secure="false" />
</cross-domain-policy>

uploadify　
http://www.uploadify.com/
s3にflashからあげる資料
http://docs.aws.amazon.com/AmazonS3/2006-03-01/dev/HTTPPOSTFlash.html

それを無理やり対象のformにappend！
それも似た目が汚いので
jquery.tpmlで追加！
https://github.com/BorisMoore/jquery-tmpl
それが以下のソース。
うまくいってるけど、何か落とし穴があるだろうか・・・

<script type="text/javascript" src="jquery.tmpl.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.notify.js"></script>

s3upload.php

<?php
        $policy = <<<EOS
{"expiration": "2009-01-01T00:00:00Z",
  "conditions": [
    {"acl": "private"},
    ["starts-with", "\$key", "upload_dir/"],
    {"bucket": "youe-bucket"}, 
    {"success_action_status": '201'},
    ["starts-with", "\$filename", ""],
  ]
}
EOS;
        $signature = hash_hmac("sha1", base64_encode($policy), S3_SECRET, true);

       $policy = base64_encode($policy),
       $signature = base64_encode($signature)
     ?>
<script type='text/javascript'>
    $(document).ready(function() {
        var isUpload =false;
        var index =1;
        $('#file_upload').uploadify({
            'swf'      : '/js/uploadify/uploadify.swf',
            'uploader' : 'https://your_bucket.s3.amazonaws.com/',
            'fileObjName' : 'file',

　　　　　//上の  $policy と対応させる
            'formData' : {
                "AWSAccessKeyId"        : "your s3key",
                "acl"               : "private",
                "key"               : 'upload_dir/',
                "policy"            : "<?php echo $policy ?>",
                "signature"         : "<?php echo $signature ?>",
                'success_action_status' : '201'
            },

            'uploadLimit' : 3,
            'fileSizeLimit' : '10MB',
            'onUploadComplete' : function(file) {
                isUpload = false;
            },
            'onUploadStart' : function(file) {
                isUpload = true;
            },
           // ファイル形式を絞る（ホワイトリスト）
            fileTypeExts' : '*.gif; *.jpg;', 
            'onUploadSuccess' : function(file, data, response) {
                var location= $(data).find("Location").text();
                var eTag= $(data).find("ETag").text();
                var key= $(data).find("Key").text();
                var bucket= $(data).find("Bucket").text();
                $('#file_form_tmpl').tmpl({index: index, location: location ,etag: eTag,key: key,bucket: bucket}).appendTo('#target_form');
                index = index +1;
            }
        });

        $("form").submit(function() {
            if (!isUpload) {
                return true;
            } else {
                return false;
            }
        });
    });
</script>

<script id="file_form_tmpl" type="text/x-jquery-tmpl">
    <input type='hidden' name='file_upload[${index}][location]' value="${location}" />
    <input type='hidden' name='file_upload[${index}][etag]' value="${etag}" />
    <input type='hidden' name='file_upload[${index}][key]' value="${key}" />
    <input type='hidden' name='file_upload[${index}][bucket]' value="${bucket}" />
</script>

<input type='file' id='file_upload' name='file_upload' />


<form id='target_form'>
</form>