File Uploader

This is a simple application for uploading and downloading files. It has two components:

• Client - A React web application that uses:
  • Redux with typescript-fsa, reselect and redux-saga for state management
  • The ResumableJS file upload engine
  • Material-UI with some SASS styling for look and feel
  • The Caddy webserver for hosting
  • Jest with Enzyme for testing
• Server - A NodeJS backend that uses:
  • Express for exposing a REST API
  • busboy for handling multipart POST requests
  • io-ts for run-time typechecking and request data validation
  • Mocha with chai and supertest for testing
  • Winston for logging

How to run it

Production mode

You will need Docker Engine v17.04.0+ and Docker Compose v1.12.0+.

Run docker-compose up in this folder and both services will be built and started up in the docker environment.

• the UI will be available on http://localhost (port 80) by default
• the backend will be available on http://localhost:3001 by default

Some folders from the running containers will be mapped to the data folder:

/data
   /logs ...... log files
   /tmp ....... temporary storage for uploaded chunks
   /uploads ... uploaded files go here 

All the ports and paths mentioned above can be changed in the .env file in this folder (changes require docker-compose down && docker-compose up to take effect).

Development mode

If you want to run the application in development mode you need Node.js and npm.

You have to run the client and server separately:

Server

1. go to the /server folder
2. run npm install
3. run npm start starts a dev environment

The server will be listening on localhost:3001.

Additional commands:

• npm run test runs tests
• npm run test:debug runs tests with increased log level
• npm run test:coverage generates test coverage report
• npm run lint performs typescript linting with tslint

Client

1. go to the /client folder
2. run npm install
3. run npm start

The web application will be available on http://localhost:3000.

Additional commands:

• npm run test runs tests
• npm run lint performs typescript linting with tslint

Ideas for further improvement

Server

• Swagger API documentation
• more robustness against corrupted ResumableJS metadata in POST requests
• support for querying which chunks are already uploaded
• revive existing chunks upon server restart

Client

• pause and resume download
• calculate and send CRC checksum for each chunk
• list and existing uploaded files on page load and allow deletion continue uploads on reload
• more informative UI (speed and upload status, time remaining, stalled connection warning, …)
• more explicit user actions feedback (via toasts or similar)
• use custom file upoad DOM listener instead instead of using ResumableJS