Awesome Open Source
Awesome Open Source

AWS S3 Bucket Browser

-

Single HTML file to browse AWS S3 buckets

Demo

Installation

Self-Hosted

  • Just download index.html and put at root level of S3 bucket.
    • Adjust config within index.html if needed.
      • bucketUrl - string
      • rootPrefix - string
      • title - string
      • subtitle - string
      • logo - location
      • favicon - location
      • keyExcludePatterns - array of regex
      • pageSize - number
  • ⚠️ Ensure following Bucket Permissions
    • Go to https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
    • Grant public read permission by Access Control List or Bucket Policy
      • Access Control List
        • Enable List objects for Everyone
      • Bucket Policy
        {
            "Version": "2012-10-17",
            "Statement": [
                {
                    "Sid": "PublicRead",
                    "Principal": "*",
                    "Effect": "Allow",
                    "Action": [
                        "s3:ListBucket",
                        "s3:GetObject"
                    ],
                    "Resource": [
                        "arn:aws:s3:::<YOUR BUCKET NAME>",
                        "arn:aws:s3:::<YOUR BUCKET NAME>/*"
                    ]
                }
            ]
        }
        
  • Open <YOUR BUCKET URL>/index.html in your browser.

Hosted

  • ⚠️ Ensure following Bucket Permissions
    • Go to https://s3.console.aws.amazon.com/s3/buckets/<YOUR BUCKET NAME>/?tab=permissions
    • Grant public read permission by Access Control List or Bucket Policy
    • Grant Cross Origin Access by CORS Configuration
      [
      {
          "AllowedHeaders": [
              "*"
          ],
          "AllowedMethods": [
              "GET"
          ],
          "AllowedOrigins": [
              "http://www.example.com"
          ],
          "ExposeHeaders": [
              "x-amz-server-side-encryption",
              "x-amz-request-id",
              "x-amz-id-2"
          ],
          "MaxAgeSeconds": 3000
      }
      ]
      
  • Open hosted index.html in your browser and provide bucket url as bucket request parameter

CloudFront Setup

If you use CloudFront in upfront of your S3 bucket ensure following CloudFront settings.

  • Allowed/Cached HTTP Methods: GET, HEAD, OPTIONS
  • Cached Based on Selected Headers: Whitelist
    • Access-Control-Request-Headers
    • Access-Control-Request-Methods
    • Origin
  • Query String Forwarding and Caching: Forward all

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Html (433,653
Vue (84,652
Aws (11,183
Website (9,736
Browser (2,693
S3 (1,699
Bulma (929
Directory (516
Index (406
S3 Bucket (362
Folder (228
Bucket (161
Related Projects