Search code examples
amazon-s3uploadify

Using Uploadify to POST Directly to Amazon S3


Can anyone tell me how to use Uploadify to upload directly to Amazon S3?

My code is as follows:

$('#fileInput').uploadify({
  'fileDataName' : 'file',
  'uploader'  : 'uploadify.swf',
  'script'    : 'http://BUCKET-NAME-GOES-HERE.s3.amazonaws.com/',
  'cancelImg' : 'cancel.png',
  'method'    : 'post',
  'auto'      : true,
  'onError': function (a, b, c, d) {
    alert('error '+d.type+": "+d.info + ' name: ' + c.name + ' size: ' + c.size);
  },
  'scriptData' : {
    'AWSAccessKeyId': "KEY-GOES-HERE",
    'key': "${filename}",
    'acl': "public-read",
    'policy': "POLICY-STRING-GOES-HERE",
    'signature': "SIGNATURE-GOES-HERE",
    'success_action_status': '200'
  }
}); 

My (unencoded) policy string looks like this:

{
  "expiration": "2100-12-01T12:00:00.000Z",
  "conditions": [
    {"acl": "public-read"},
    {"bucket": "BUCKET-NAME-GOES-HERE"},
    {"success_action_status" : 200},
    ["starts-with", "$filename", ""],
    ["starts-with", "$folder", ""],
    ["starts-with", "$key", ""],
    ["content-length-range", 1, 209715200]
  ]
}

Using the above code actually allows me to select a file, which it then appears to upload (somewhere), but nothing shows up in my S3 bucket and no errors are returned to the JS console.

Using a regular HTML form to post a file to the S3 bucket works fine.


Solution

  • From this thread the uploadify forum:

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript" src="jquery.uploadify.v2.1.0.js"></script>
    <link rel="stylesheet" href="uploadify.css" type="text/css" media="screen" />
    </head>
    
    <body>
    <form>
    <input id="fileInput" name="fileInput" type="file" />
    </form>
    <script type="text/javascript">// <![CDATA[
       $(document).ready(function() {
          $('#fileInput').uploadify({
             'fileDataName' : 'file',
              'uploader'  : 'uploadify.swf',
              'script'    : 'http://UPLOADBUCKET/',
              'cancelImg' : 'cancel.png',
              'auto'      : true,
              'onError' : function(errorObj, q, f, err) { console.log(err); },
    
              'scriptData' : {
                  AWSAccessKeyId: "ACCESS_KEY",
                 key: "foo/${filename}",
                 acl: "public-read",
                 policy: "POLICY STRING"
                 signature: "SIGNATURE,
                    success_action_status: '200'
                 }
    
              });
        });
    // ]]></script>
    </body>
    
    </html>
    

    The base for the policy string is as follows:

    { "expiration": "2100-12-01T12:00:00.000Z",
    "conditions": [
      {"acl": "public-read" },
      {"bucket": "UPLOADBUCKET" },
      {"success_action_status" : '200'},
        ["starts-with", "$filename", "" ],
        ["starts-with", "$folder", "" ],
        ["starts-with", "$key", "foo"],
        ["content-length-range", 1, 209715200]
      ]
    }