1

I'm using http://pjambet.github.io/blog/direct-upload-to-s3/ as a tutorial. I've already enabled CORS (see CORS file). I get the JSON response, which is fine (in the add) function of the file-upload query. The failure happens after getting the signature and policy. When attempting to actually upload the file, I get the Access Denied error from Amazon. The file does not upload. Am I missing something?

HTML:

<form class="file_upload" action="https://<% $AWSBUCKET %>.s3.amazonaws.com" method="post" enctype="multipart/form-data">
<input type="hidden" name="key" />
<input type="hidden" name="policy" />
<input type="hidden" name="signature" />
<input type="hidden" name="AWSAccessKeyId" value="<% $AWSACCESS %>" />
<input type="hidden" name="acl" value="public-read" />
<input type="hidden" name="success_action_status" value="201" />

<div class="fileupload-content">
  <div class="fileupload-progress">
  </div>
</div>
<div class="file-upload">
  <span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Select files...</span>
    <input type="file" name="file" multiple>
  </span>
  <div class="progress progress-striped active">
    <div class="bar">
  </div>
</div>

Javascript:

$(function() {
  $('.file_upload').each(function() {
    var form = $(this)
    $(this).fileupload({
      url: form.attr('action'),
      type: 'POST',
      autoUpload: true,
      dataType: 'xml', // This is really important as s3 gives us back the url of the file in a XML document
      add: function (event, data) {
        $.ajax({
          url: "s3signed.html",
          type: 'GET',
          dataType: 'json',
          data: {filename: data.files[0].name, max_file_size : <% $MAX_FILE_SIZE %>}, // send the file name to the server so it can generate the key param
          async: false,
          success: function(data) {
            // Now that we have our data, we update the form so it contains all
            // the needed data to sign the request
            form.find('input[name=key]').val(data.key)
            form.find('input[name=policy]').val(data.policy)
            form.find('input[name=signature]').val(data.signature)
            console.log(data.key);
            console.log(data.policy);
            console.log(data.signature);
          }
        })
        data.submit();
      },
      send: function(e, data) {
        $('.progress').fadeIn();
      },
      progress: function(e, data){
        // This is what makes everything really cool, thanks to that callback
        // you can now update the progress bar based on the upload progress
        var percent = Math.round((e.loaded / e.total) * 100)
        $('.bar').css('width', percent + '%')
      },
      fail: function(e, data) {
        console.log('fail');
        console.log(data);
        console.log(e);
      },
      success: function(data) {
        // Here we get the file url on s3 in an xml doc
        var url = $(data).find('Location').text()

        $('#real_file_url').val(url) // Update the real input in the other form
      },
      done: function (event, data) {
        $('.progress').fadeOut(300, function() {
          $('.bar').css('width', 0)
        })
      },
    })
  })
});

Perl:

use Digest::HMAC_SHA1 qw(hmac_sha1 hmac_sha1_hex);
use MIME::Base64;

use Data::Uniqid qw ( uniqid );
my $uniqid = uniqid;

my $key = "upload/$uniqid/$filename";
my $policy = s3PolicyDocument($AWSBUCKET, $max_file_size, $key);
my $signature = s3Signature($AWSSECRET, $policy);

my %response = (
  policy => $policy,
  signature => $signature,
  key => $key,
  success_action_status => 201
);

use JSON;
print JSON::encode_json(\%response);

sub s3PolicyDocument {
  my ($AWSBUCKET, $max_file_size, $key) = @_;
  use DateTime;
  my $dt = DateTime->now;
  $dt->add(minutes => 30);

  my $policy = '{"expiration": "'.$dt.'",
    "conditions": [ 
      {"bucket": "'.$AWSBUCKET.'"}, 
      {"acl": "public-read"},
      ["starts-with", "$key", ""],
      ["starts-with", "$Content-Type", ""],
      ["starts-with", "$name", ""],
      ["starts-with", "$Filename", ""],
      ["content-length-range", 0, '.$max_file_size.'],
      {"success_action_status": "201"},
    ]
  }';

  use Digest::HMAC_SHA1 qw(hmac_sha1 hmac_sha1_hex);
  use MIME::Base64;


  $policy = encode_base64($policy);
  $policy =~ s/\n//g;
  return $policy;
}

sub s3Signature {
  my($AWSSECRET, $policy) = @_;
  my $signature = encode_base64(hmac_sha1($policy, $AWSSECRET));
  $signature =~ s/\n//g;
  return $signature;
}

CORS:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Amazon Response:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>2448EA4E8E1F5377</RequestId>
<HostId>NlbqOAnjhPnqQLpaJRY1cVC6nFJ3ziVK+7ENrgILhA2njekXnp4mowv7jyTE2Z7K</HostId>
</Error>

2 Answers 2

2

According to the documentation for cross-site upload you should use the forceIframeTransport option.

$(this).fileupload({
    forceIframeTransport : true,
    ...
});
5
  • That did it! I had to remove a few of the policy parameters, but it's working! Jan 17, 2014 at 10:58
  • @RijviRajib Check if your fail callback is still working, I've heard about problem about it with Iframe Transport. Jan 17, 2014 at 11:01
  • Yup, the fail callback is not working... I get a valid upload response, but the request is failing. Any ideas on a remedy? Jan 17, 2014 at 11:05
  • 1
    @RijviRajib for the moment the question has no answer, I'm looking for it : stackoverflow.com/questions/21176964/… Jan 17, 2014 at 11:08
  • github.com/blueimp/jQuery-File-Upload/issues/2886 - I guess I can't use jQuery file upload for this. Jan 17, 2014 at 19:57
1

Please follow following steps Go to s3 The file which you are trying to access(Make it public accessible) simply right click->make public

This should solve your problem.

1
  • The file upload is failing. Jan 17, 2014 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.