403 error on upload with ng-file-upload + acl: pub

Question

Scenario:

blog feature for dev site (angular + firebase + Aws S3 + ng-file-upload)

uploading images to S3 for storage and storing the url in firebase to be called when the blogpost is rendered

Problem -

• 403 error Access Denied on upload- when acl in the request header is 'public-read'
• 'private' works - meaning they upload but don't render on the page

(* but with manually changing image to make pubilic in Aws S3 bucket the image renders in the blog*) - going in circles to try to figure out where the issue lies

Here is the code

// Policy Document

 $scope.policy = {
"expiration": "2020-01-01T00:00:00Z",
"conditions": [
  {"bucket": "my-bucket-name"},
  ["starts-with", "$key", ""],
  {"acl": 'public-read'},
  {"success_action_redirect":"#"},
  ["starts-with", "$Content-Type", ""],
  ["starts-with", "$filename", ""],
  ["content-length-range", 0, 524288000]
  ]
};

// Upload method and parameters

Upload.upload({
  url: 'https://my-bucket-name.s3.amazonaws.com/',
  method: 'POST',
  fields: {
    key: file.name,
    AWSAccessKeyId: 'MY-ACCESS-KEY,
    acl: 'public-read',
    success_action_redirect: "#",
    policy: myPolicy, // Base64 encoded
    signature: mySignature,
    "Content-Type": file.type != '' ? file.type : 'application/octet-stream',
    filename: file.name
  },
  file: file
})

// Cors 
`<?xml version="1.0" encoding="UTF-8"?>`
` <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">`
   ` <CORSRule>`
        `<AllowedOrigin>*</AllowedOrigin>`
       ` <AllowedMethod>GET</AllowedMethod>`
        `<AllowedMethod>POST</AllowedMethod>`
       ` <AllowedMethod>HEAD</AllowedMethod>`
        `<MaxAgeSeconds>3000</MaxAgeSeconds>`
       ` <AllowedHeader>*</AllowedHeader>`
   ` </CORSRule>`
`</CORSConfiguration>`

// Bucket Policy
{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "UploadFile",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::MY-ID:user/MY-USERNAME"
        },
        "Action": [
            "s3:GetObject",
            "s3:PutObject"
        ],
        "Resource": "arn:aws:s3:::my-bucket-name/*"
    },
    {
        "Sid": "crossdomainAccess",
        "Effect": "Allow",
        "Principal": "*",    // there is asterik here just not showing up in this comment 
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::my-bucket-name/crossdomain.xml"
    }
]
}

Answer 1

i'm also looking on a solution for to upload/display images using firebase. I heard ionic is a good option, what do you think?