Receiving Invalid policy document or request headers error when using fineuploader for amazon s3

Question

I am trying to use FineUploader's new feature allowing direct upload to amazon s3. Currently, I am not able to upload photos. I am getting the error: "Invalid policy document or request headers!"

The developers asked that questions be posted here at stackoverflow.

I am following their instructions on this page:

http://blog.fineuploader.com/2013/08/16/fine-uploader-s3-upload-directly-to-amazon-s3-from-your-browser/#guide

In setting things up, I have also emulated the example file linked to there: https://github.com/Widen/fine-uploader-server/blob/master/php/s3/s3demo.php

I have my javascript set up thusly with very few options:

$('#fineuploader-s3').fineUploaderS3({
          request: {
              endpoint: "http://thenameofmybucket.s3.amazonaws.com",
              accessKey: “mypublicaccesskey”
          },

          signature: {
              endpoint: "s3demo.php"
          },

          iframeSupport: {
              localBlankPagePath: "/success.html"
          },

         cors: {
              expected: true
          }
  });

I know there are lots of places where this could have gone wrong for me. I have never used s3 or fineuploader before, so sorry if these are dumb questions. But here are the places where I felt most confused in setting up. I have a feeling the problem lies in #1:

(1) In the example javascript, this is how the path to signature is set up:

// REQUIRED: Path to our local server where requests can be signed.
          signature: {
        endpoint: "/s3/signtureHandler"
          },

I wasn't sure if that is meant to be an empty file where some json is created or if it's supposed to point to the php script where the function to create the json is, in my case s3demo.php, which I copied directly.

(2) In the s3demo.php file, the only lines I changed were these:

$clientPrivateKey = $_SERVER['I put my private key here'];

$expectedBucket = "http://thenameofmybucket.s3.amazonaws.com";

function handlePreflightedRequest() {
    // If you are relying on CORS, you will need to adjust the allowed domain here.
    header('Access-Control-Allow-Origin: http://mywebsitename.org');
}

(3) This is what I have for my CORS file, I wasn’t sure if it was right because the examples on the instructional page don’t include the tags:

<CORSRule>
        <AllowedOrigin>http://mywebsitename.org</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>

(4) As detailed in the instructions, I went into IAM panel and created a group with the policy copied from the instructions exactly, but with the actual name of my bucket:

{
  "Version":"2012-10-17",
  "Statement":[{
     "Effect":"Allow",
     "Action":"s3:PutObject",
     "Resource":"arn:aws:s3:::thenameofmybucket/*”
   }]
}

, then a user from which I obtained the public and private access keys used in the javascript and php files respectively.The username is not specifically used anywhere in the scripts.

I'm hoping there is something really obvious that I've done incorrectly here. Thanks for your time.

Answer 1

If I understand correctly, you are seeing the "Invalid policy document..." message client-side when attempting to sign the request for a simple upload. You are also using the s3demo.php provided PHP server-side example.

The biggest problem I see with your changes is the $expectedBucket variable. Your bucket is not "http://thenameofmybucket.s3.amazonaws.com", it's "thenameofmybucket". Most likely, the server-side code is rejecting the policy as it is expecting a bucket named "http://thenameofmybucket.s3.amazonaws.com" when I'm sure your bucket is in fact named "thenameofmybucket". Change that line to $expectedBucket = "thenameofmybucket";.

Also, it's not clear where you are storing your client-side secret key, based on your question. If your secret key is, say, "12345", do you have a line of code that looks like this?

$clientPrivateKey = $_SERVER['12345'];

If so, this is another problem with your server-side code. The $_SERVER superglobal in PHP is looking for an environment variable named "12345" that, presumably, contains your secret key. If you haven't set up such a variable, then either do so, or, perhaps, just set the value of $clientPrivateKey to your secret key.

Also, are you really working in a cross-origin environment here? It doesn't look like you are. If so, you don't need any of the stuff marked "CORS", or "cross-origin" or "cross-domain" in the PHP example.

UPDATE:
You should also set the $expectedMaxSize global to null if you aren't setting any size limit restrictions on uploads. We are updating the PHP example for Fine Uploader S3 now with a few improvements and clarifications that should help others in the future.