S3-BROWSER

Found this project to be helpful https://github.com/qoomon/aws-s3-bucket-browser

it contains a single index.html file wich is configurable and can easily be embedded.

Steps.

We have to make the bucket on s3 publicly available with read access and this can be done by setting the

• bucket policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:ListBucket",
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::oni-example",
                "arn:aws:s3:::oni-example/*"
            ]
        }
    ]
}

• also we need to allow CORS. if the provided index.html will be embeded in http://ckan-dev:300/resource/<id> we need to added to the Allowed origin

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

once this is done copy over the s3 bucket url e.g https://s3.us-east-1.amazonaws.com/oni-example where oni-example is my bucket name and us-east-1 is the bucket region.

The index.html has config variable this can be updated with new values

const config = {
                title: 'Bucket Browser', // prefix value with `HTML> ` to render as html, see subtitle
                subtitle:
                    'HTML>made with ♥ by <b><a href="https://qoo.monster">qoomon</a></b>', // prefix value with `HTML> ` to render as html
                logo: 'https://qoomon.github.io/aws-s3-bucket-browser/logo.png',
                favicon:
                    'https://qoomon.github.io/aws-s3-bucket-browser/favicon.ico',
                primaryColor: '#167df0',

                bucketUrl: 'https://s3.us-east-1.amazonaws.com/oni-example',
                
                rootPrefix: '', // e.g. 'subfolder/'
                keyExcludePatterns: [/^index\.html$/, /^Urban_3D_Challenge\//], // matches againt object key relative to rootPrefix
                pageSize: 50,

                bucketMaskUrl: undefined,
               

                defaultOrder: 'name-asc', // (name|size|dateModified)-(asc|desc)
            }

you can change everything there and eve the color to suite our taste

and here is the result