S3 UI 🌱

!! An updated app is in the works as we speak !!

You can follow the progress here.

User interface for AWS's Simple Storage Service

Base functionality includes the ability to:

• Create/Delete buckets
• Create/Delete folders
• Upload/download/delete files
• Upload via drag and drop
• Breadcrumb folder navigation
• Files uploaded with the same filename will be automatically renamed with a numeric iterator
• Bucket and folder navigation is done via query string; allowing bookmarking and sharing
• Usage across all screen sizes

Features to be included in future iterations:

• Send email links for file/folder download
• Ability to change filename
• File preview

Configuration:

S3_UI can be run in either development or production mode.

• For both, modify the .env file in the backend folder as needed. Options within the .env file are as follows:

NODE_ENV

• dev (webpack dev server)
• prod (docker-compose)

ENV

• localhost (For local development using the webpack dev server. Initiated through localstack start in the cli)
• localstack (Use the impermanent emulator - through docker-compose. NODE_ENV needs to be prod)
• aws (Use the actual aws s3 server - provide access key and secret key. NODE_ENV needs to be prod)

---

Running locally:

• Adjust the devServer host and the argument within DefinePlugin > HOSTNAME in webpack.config.js to match your local IP address.
• $ pip install localstack
• $ localstack start - To start aws development server
• $ cd frontend npm start
• $ cd backend nodemon server or node server

Running via docker compose: From the project, root level in your cli:

• For local usage, change the HOSTNAME endpoint from s3ui.misterpea.me to localhost within webpack.config.js.
• To start: docker-compose up
• To stop and remove all docker images: docker-compose down && docker rmi $(docker images -q)

localStack CLI integration:

Your actual S3 buckets can be cloned and populated into your localstack¹ mock with this script.

---

Accessing/manipulating localstack S3 via CLI

Command line usage - s3: aws s3 ls --endpoint-url http://localhost:4566 s3://myS3Bucket

Command line usage - s3api: aws s3api put-object --endpoint-url http://localhost:4566 --bucket myS3Bucket --key folder_one/

AWS S3 CLI Reference: https://awscli.amazonaws.com/v2/documentation/api/latest/reference/s3/index.html#cli-aws-s3

AWS S3api CLI Reference: https://awscli.amazonaws.com/v2/documentation/api/latest/reference/s3api/index.html

To do:

• Get List of Buckets - Name - Date Created - AWS Region
• Create New Bucket
• Prevent the addition of buckets of the same name
• Delete Buckets
• Error catching - Bucket Creation
• Get Files/Folders
• Framer Motion integration
• Add Folder
• Prevent the addition of folders of the same name
• Generate new incremented filename for same name
• Delete Folder
• Error catching - Folder Creation
• Drag and drop
• Add File(s)
• Deal with duplicate file names
• Error catching - File Upload
• Delete Files
• Error catching - File Deletion
• Get/Subscribe to Loading Percentage
• Upload progress bar
• Mobile Layout
• Tablet Layout
• Desktop Layout
• Drag and drop when in an empty folder
• Docker deployment
• Remove Redux Logging
• HTTPS
• Fix address bar retract on mobile/tablet - prolly will need to reconfigure the DOM construction
• Some notification from when a object is requested for download, and when the download starts
• Code splitting
• 404
• Handling for non-existent query string
• Handling and ZIP formats

---

Longer-term development

• Conditional fetches for buckets utilizing cache control
• Change file/folder/bucket list to use event delegation
• Change Drag/Drop to use a specific drag-overlay-area, rather than a per list-item area
• Right click to delete/shift-click multiple files (via append current right-click menu)
• Send Email
• Generate a download url
• Upload folders with nested content
• Ability to change filename
• Preview files. Lo-res images or small text extracts
• Catches for incompatible filetypes like .app (which causes a hang)
• User/Error logs

---

Stack:

• React
• SCSS
• Redux
• Axios
• ExpressJS
• AWS S3 Client V3 - @aws-sdk/client-s3
• Docker
• Nginx
• GCP Compute Engine
• localStack
• Jest/Enzyme
• Adobe XD

Footnotes

1. Only works when running localstack via localstack start, with the project running locally ↩