Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qoomon/aws-s3-bucket-browser
Single page application to browse AWS S3 bucket content
https://github.com/qoomon/aws-s3-bucket-browser
aliyun-oss aws aws-s3 browser bucket bulma directory directory-listing explorer folder google-storage html index list listing s3 s3-bucket satic vue website
Last synced: 26 days ago
JSON representation
Single page application to browse AWS S3 bucket content
- Host: GitHub
- URL: https://github.com/qoomon/aws-s3-bucket-browser
- Owner: qoomon
- License: mit
- Created: 2019-11-13T18:00:27.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-15T19:27:13.000Z (3 months ago)
- Last Synced: 2024-10-01T01:41:03.801Z (about 1 month ago)
- Topics: aliyun-oss, aws, aws-s3, browser, bucket, bulma, directory, directory-listing, explorer, folder, google-storage, html, index, list, listing, s3, s3-bucket, satic, vue, website
- Language: HTML
- Homepage: https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.amazonaws.com/spacenet-dataset#
- Size: 289 KB
- Stars: 248
- Watchers: 10
- Forks: 84
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - qoomon/aws-s3-bucket-browser - Single page application to browse AWS S3 bucket content (website)
README
# AWS S3 Bucket Browser [](https://stars.medv.io/qoomon/aws-s3-bucket-browser)
Single HTML file to browse AWS S3 buckets
## [Demo](https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.amazonaws.com/spacenet-dataset#)
## Features
* Compatible Providers: [](https://cloud.google.com) [](https://ibm.com/cloud) [](https://digitalocean.com)
* List all files in a table view
* Treat and display `/` in keys as folders
* Render preview for Makrdown files
* Show `Install` button for `manifest.plist` on iOS devices
## Installation
#### Self-Hosted
Click me
* Just download [`index.html`](index.html) and upload it to your bucket.
* Adjust [config](index.html#L8-L37) within `index.html` if needed, e.g.
```js
const config = {
title: 'Bucket Browser', // prefix value with `HTML> ` to render as html, see subtitle
subtitle: 'HTML>made with ♥ by qoomon', // 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: undefined,
// If bucketUrl is undefined, this script tries to determine bucket Rest API URL from this file location itself.
// This will only work for locations like these
// * https://s3.amazonaws.com/BUCKET-NAME/index.html
// * https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME/index.html
// * http://BUCKET-NAME.s3-website-BUCKET-REGION.amazonaws.com/index.html
// * https://storage.googleapis.com/BUCKET-NAME/index.html
// * https://BUCKET-NAME.s3-web.BUCKET-REGION.cloud-object-storage.appdomain.cloud/
// * https://BUCKET-NAME.BUCKET-REGION.digitaloceanspaces.com
// * https://BUCKET-NAME.BUCKET-REGION.cdn.digitaloceanspaces.com
// If bucketUrl is set manually, ensure this is the bucket Rest API URL, e.g.
// * https://s3.amazonaws.com/BUCKET-NAME
// * https://storage.googleapis.com/BUCKET-NAME
// The URL should return an XML document with as root element.
rootPrefix: undefined, // e.g. 'subfolder/'
keyExcludePatterns: [/^index\.html$/], // matches againt object key relative to rootPrefix
pageSize: 50,
bucketMaskUrl: undefined,
// If bucketMaskUrl is set file urls will be changed from ${bucketUrl}/${file} to ${bucketMaskUrl}/${file}
// bucketMaskUrl: 'https://example.org'
// => https://example.org/foo/bar.txt
// bucketMaskUrl: document.location.origin
// => ${document.location.origin}/foo/bar.txt
defaultOrder: 'name-asc' // (name|size|dateModified)-(asc|desc)
}
```
* ##### ⚠️ Ensure Bucket Permissions
* Go to `https://s3.console.aws.amazon.com/s3/buckets//?tab=permissions`
* Grant public read permission by `Access Control List` or `Bucket Policy`
* Access Control List
* Enable `List objects` for `Everyone`
* Bucket Policy
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Principal": "*",
"Effect": "Allow",
"Action": [
"s3:ListBucket",
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::",
"arn:aws:s3:::/*"
]
}
]
}
```
* ##### ⚠️ Ensure Bucket CORS
* Depending on your setup you may need need to ensure following `CORS Configuration`
* Go to `https://s3.console.aws.amazon.com/s3/buckets//?tab=permissions`
* Grant Cross Origin Access by following `CORS Configuration`, replace `http://www.example.com` by your address of bucket browser `index.html`
* e.g `http://example.s3-website-eu-central-1.amazonaws.com/index.html`
```json
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"http://www.example.com",
"https://BUCKET-NAME.s3.amazonaws.com",
"https://s3.BUCKET-REGION.amazonaws.com/BUCKET-NAME",
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
],
"MaxAgeSeconds": 3000
}
]
```
* Open `/index.html` in your browser.
#### Hosted
Click me
* ##### ⚠️ Ensure Bucket Permissions
* see [Self-Hosted](#self-hosted)
* ##### ⚠️ Ensure Bucket CORS
* see [Self-Hosted](#self-hosted)
* Open hosted `index.html` in your browser and provide bucket url as `bucket` request parameter
* `${INDEX_FILE_LOCATION}?bucket=${S3_BUCKET_URL}`
* e.g. [`https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org`](https://qoomon.github.io/aws-s3-bucket-browser/index.html?bucket=https://s3.eu-west-1.amazonaws.com/data.openspending.org)
### CloudFront Setup
Click me
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-Method`
- `Origin`
- Query String Forwarding and Caching: `Forward all`
### IBM Cloud Object Storage Setup
Click me
IBM Cloud Object storage only supports virtual host-style addressing, i.e. `https://s3-web..cloud-object-storage.appdomain.cloud/` for static website hosting. Otherwise follow the instructions
in this [tutorial](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-static-website-tutorial) to configure your bucket. In addition, you may need to [configure CORS](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-curl#curl-new-cors) for your bucket.
```xml
*
GET
*
```