S3 Web Uploader

A minimalistic UI to conveniently upload and download files from AWS S3 / Digital Ocean Space / MinIO

Live Demo: https://gaplo917.github.io/S3WebUploader

Highlights

Angular based web client for uploading/downloading file(s) from AWS S3
Track multiple upload progress through one consistent UI.
Tree-like folder browser so you can find the files you want faster
Drag-and-drop upload with support for single file, multiple files and folder upload
Support multiple account Login
Securely encrypt credential with standalone master password and save in browser
Options to rename files during upload
Support Virtual-host style endpoint

Built On

This app is built with many amazing framework, including:

Project History

This project is modified from fully-coupled electron-based project https://github.com/Yamazaki93/S3Uploader/tree/762121ab33fe4854b1ec3f94d5bcc260f05f7e6d.

Frictions of Electron

Yamazaki93/S3Uploader use aws-sdk/NodeJs inside the electron to communicate with S3. This solved a lot of limitation of browsers, for example

solved CORS(Cross Origin Resource Sharing) issues
download a file inside electron using S3 getObject API(able to show progress), then write to file system.
choosing a custom download path
reading file system to retrieve ~/.aws credentials

However, for whom want to upload things to S3 compatible service momentarily, installing an electron application has too much frictions.

Let alone, I think electron application granted too much permissions for this simple purpose (If it can read your ~/.aws credentials, what else can it read?).

So, I decided to rewrite the S3 communication part completely to build a fully browser-compatible version^*.

^{* Some user experience has been changed due to browser limitation}

Browser-compatible Implementation

Rewrite the communication part with aws-sdk-js completely, now it is a browser-compatible tree view & drag-drop upload
Reuse most of the UI from Yamazaki93/S3Uploader with some enhancements and bug fixes
Added MinIO Demo for S3-compatible service
Support Virtual-host style endpoint
Store all user inputs securely in browser with a custom single master password by applying
- pbkdf2 hash master password and store in LocalStorage for password verification
- HmacSHA512 hash master password to produce fixed length secret for AES256 encryption
- You have to unlock with master password every time

CORS Limitation

MinIO 's API enabled CORS by default on all buckets for all HTTP verbs. However, DigitalOceanSpace & S3 are not.

There are two ways to solve CORS:

Host S3WebUploader (Static Web App) on your own bucket
Configure CORS settings on your bucket (make sure you know the side effects before apply CORS settings)

Getting Start

# development
yarn install
yarn start

# Test
yarn test

# Liniting
yarn lint

# production build
yarn build

More cool projects?

I sincerely believe I couldn't complete this project within a day (< 12 hours) without the following tools that improve my productivity of reading/writing code.

Credit

Thanks for the amazing works of Yamazaki93/S3Uploader that built with a clean and consistent Angular architecture initially.

License

MIT

acrogenesis/S3WebUploader