Welcome to the S3-Directory-Listing project! Are you tired of the boring, generic S3 bucket listings? π₯± Well, look no further! π This snazzy little JS script and HTML combo will turn your S3 bucket into a fancy file and folder listing with a nice UI and search functionality. Oh, and did I mention it also has a dark mode? π
To use S3-Directory-Listing, just follow these easy-peasy steps:
dark-mode.css
, s3.js
and index.html
to your S3 bucket.bucketName
and s3Domain
variables in s3.js
with your bucket's name your S3 provider's domain name.index.html
file in your browser, and voilΓ ! π©β¨ You now have a fancy S3 directory listing.To make this magic work, you need to configure your S3 bucket settings properly. The following steps apply to AWS S3 buckets, they might differ depending on your S3 provider:
<your-bucket-name>
with your actual bucket name:{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "S3DirectoryListing",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::<your-bucket-name>/*",
"arn:aws:s3:::<your-bucket-name>"
]
}
]
}
Or you can use an IP Policy for your bucket if you need.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "S3DirectoryListing",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::<your-bucket-name>/*",
"arn:aws:s3:::<your-bucket-name>"
],
"Condition": {
"IpAddress": {
"aws:SourceIp": "<your-ip-address>"
}
}
}
]
}
Replace <your-ip-address>
with your desired IP address or a CIDR block to restrict access to specific IP addresses.
Enable static website hosting for your bucket:
index.html
.Update your Cross-origin resource sharing (CORS) settings like below.
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
Note down the bucket's static website endpoint (e.g., http://<your-bucket-name>.s3-website-<your-region>.amazonaws.com/index.html
or https://<your-bucket-name>.s3.amazonaws.com/index.html
for secure connection). This is where you can access your fancy directory listing.
That's it! Now you can enjoy your brand new, fancy-pants S3 directory listing! πΊπ
You can customize the number of items shown per page by modifying the itemsPerPage
variable in s3.js
.
const itemsPerPage = 10; // Change this number to your desired items per page
https://s3-directory-listing.s3.amazonaws.com/index.html
Feel free to share this project with your friends, colleagues, or even your grandma! π§ After all, who doesn't like a fancy directory listing? π
If you have any questions, comments, or jokes to share, head over to the GitHub repo and let me know. I'd love to hear from you! π€
Happy listing! π