## 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