Initial commit

frontend/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/.gitignore

@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+dist/
+tmp/
+out-tsc/
+bazel-out/
+
+# Node
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

frontend/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

frontend/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

frontend/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/README.md

@@ -0,0 +1,59 @@
+# TreasureChest
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.6.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

frontend/angular.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "treasure_chest": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/treasure_chest",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/rose-red.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "treasure_chest:build:production"
+            },
+            "development": {
+              "buildTarget": "treasure_chest:build:development"
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
+            "proxyConfig": "src/proxy.conf.json"
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/rose-red.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "treasure-chest",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^19.1.0",
+    "@angular/cdk": "^19.1.3",
+    "@angular/common": "^19.1.0",
+    "@angular/compiler": "^19.1.0",
+    "@angular/core": "^19.1.0",
+    "@angular/forms": "^19.1.0",
+    "@angular/material": "^19.1.3",
+    "@angular/platform-browser": "^19.1.0",
+    "@angular/platform-browser-dynamic": "^19.1.0",
+    "@angular/router": "^19.1.0",
+    "@ngrx/signals": "^19.0.1",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^19.1.6",
+    "@angular/cli": "^19.1.6",
+    "@angular/compiler-cli": "^19.1.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.7.2"
+  }
+}

frontend/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet />

frontend/src/app/app.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+}

frontend/src/app/app.config.ts

@@ -0,0 +1,14 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes, withComponentInputBinding()),
+    provideAnimationsAsync(),
+    provideHttpClient(withInterceptorsFromDi())
+  ]
+};

frontend/src/app/app.routes.ts

@@ -0,0 +1,23 @@
+import { Routes } from '@angular/router';
+import { UploadComponent } from '../upload/upload.component';
+import { DownloadComponent } from '../download/download.component';
+import { ErrorComponent } from '../error/error.component';
+
+export const routes: Routes = [
+    {
+        'path': '',
+        'component': UploadComponent
+    },
+    {
+        'path': 'download',
+        'component': DownloadComponent
+    },
+    {
+        'path': 'error/:errorCode',
+        'component': ErrorComponent
+    },
+    {
+        'path': '**',
+        'redirectTo': '/error/404'
+    }
+];

frontend/src/conversion/to-readable-bytes.pipe.ts

@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'tcReadableBytes'
+})
+export class ToReadableBytesPipe implements PipeTransform {
+  private readonly bytesMapping = {
+    TB: 1_000_000_000_000,
+    GB: 1_000_000_000,
+    MB: 1_000_000,
+    KB: 1_000,
+    bytes: 1
+  }
+
+  transform(value: any, ...args: any[]) {
+    if (!value) {
+      return '- bytes';
+    }
+
+    if (!Number.isInteger(value)) {
+      throw new Error(`Given value '${value}' is not an int.`);
+    }
+
+    let suffix: keyof typeof this.bytesMapping;
+    for (suffix in this.bytesMapping) {
+      const minValue = this.bytesMapping[suffix];
+      if (value / minValue < 1) {
+        continue;
+      }
+
+      return `${Math.round(value / minValue)} ${suffix}`;
+    }
+
+    return '0';
+  }
+}

frontend/src/download/download.component.html

@@ -0,0 +1 @@
+<p>download works!</p>

frontend/src/download/download.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-download',
+  imports: [],
+  templateUrl: './download.component.html',
+  styleUrl: './download.component.scss'
+})
+export class DownloadComponent {
+
+}

frontend/src/error/error.component.html

@@ -0,0 +1,3 @@
+<h1>Oops! An error occurred.</h1>
+<div class="error-code">{{errorCode()}}</div>
+<div class="error-message">{{errorMessage()}}</div>

frontend/src/error/error.component.scss

@@ -0,0 +1,13 @@
+* {
+    width: 100%;
+    text-align: center;
+}
+
+h1 {
+    padding-bottom: 50px;
+}
+
+.error-code {
+    font-weight: bold;
+    font-size: 10em;
+}

frontend/src/error/error.component.ts

@@ -0,0 +1,32 @@
+import { Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'app-error',
+  imports: [],
+  templateUrl: './error.component.html',
+  styleUrl: './error.component.scss'
+})
+export class ErrorComponent {
+  protected readonly errorCode = input.required<string>();
+
+  protected readonly errorMessage = computed(() => {
+    const errorCode = this.errorCode();
+    switch (errorCode) {
+      case '401':
+        return 'Unauthorized (Key wrong)';
+      case '404':
+        return 'Resource not found';
+      case '412':
+        return 'Payload too large (File too large)';
+      case '429':
+        return 'Too many requests (Reached daily limit)';
+      case '431':
+        return 'Request Header Fields Too Large (File name or MIME type too long)';
+      case '500':
+      case '502':
+        return 'Internal server error';
+      default:
+        return `An error occurred (${errorCode})`
+    }
+  });
+}

frontend/src/http/http.models.ts

@@ -0,0 +1,9 @@
+export interface Configuration {
+    BodyMaxSize: number,
+    DaysFileAvailable: number,
+}
+
+export interface UploadResponse {
+    id: string,
+    key: string,
+}

frontend/src/http/http.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient, HttpHeaderResponse, HttpHeaders } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Configuration, UploadResponse } from './http.models';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HttpService {
+  private readonly httpClient = inject(HttpClient);
+
+  public loadOptions(): Observable<Configuration> {
+    return this.httpClient.get<Configuration>('/api/configuration');
+  }
+
+  public uploadFile(file: File): Observable<UploadResponse> {
+    const headers = new HttpHeaders()
+      .append('Content-Type', file.type)
+      .append('Content-Disposition', `filename="${file.name}"`)
+    // .append('X-Forwarded-For', '127.0.0.1');
+
+    return this.httpClient.post<UploadResponse>('/api/files', file.bytes, { headers });
+  }
+}

frontend/src/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>treasure_chest</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+
+<body>
+  <app-root></app-root>
+</body>
+
+</html>

frontend/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

frontend/src/proxy.conf.json

@@ -0,0 +1,8 @@
+{
+  "/api": {
+    "target": "http://localhost:8000",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}

frontend/src/styles.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+
+html {
+    height: 100%;
+    color-scheme: light dark;
+
+    @include mat.theme((color: mat.$violet-palette,
+            typography: Roboto,
+            density: 0));
+
+
+    body {
+        height: 100%;
+        margin: 0;
+        padding: 5%;
+        font-family: Roboto, "Helvetica Neue", sans-serif;
+    }
+}

frontend/src/upload/configuration/configuration.component.html

@@ -0,0 +1,19 @@
+<mat-chip-set>
+    <mat-chip>
+        <mat-icon matChipAvatar>difference</mat-icon>
+        <div>
+            Maximum file size: {{ configuration().BodyMaxSize | tcReadableBytes }}
+        </div>
+    </mat-chip>
+    <mat-chip>
+        <mat-icon matChipAvatar>calendar_month</mat-icon>
+        <div>
+            Availability: {{ configuration().DaysFileAvailable }}
+            @if (configuration().DaysFileAvailable === 1) {
+            day
+            } @else {
+            days
+            }
+        </div>
+    </mat-chip>
+</mat-chip-set>

frontend/src/upload/configuration/configuration.component.scss

@@ -0,0 +1,7 @@
+mat-chip-set {
+    margin-bottom: 15px;
+}
+
+mat-chip {
+    background-color: var(--mat-sys-on-secondary);
+}

frontend/src/upload/configuration/configuration.component.ts

@@ -0,0 +1,14 @@
+import { Component, input, signal } from '@angular/core';
+import { Configuration } from '../../http/http.models';
+import { ToReadableBytesPipe } from '../../conversion/to-readable-bytes.pipe';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+@Component({
+  selector: 'tc-configuration',
+  imports: [ToReadableBytesPipe, MatChipsModule, MatIconModule],
+  templateUrl: './configuration.component.html',
+  styleUrl: './configuration.component.scss'
+})
+export class ConfigurationComponent {
+  public readonly configuration = input.required<Configuration>();
+}

frontend/src/upload/file-chooser/file-chooser.component.html

@@ -0,0 +1,10 @@
+<button mat-flat-button type="file" (click)="onClick()">
+    <mat-icon>upload_file</mat-icon>
+    @if (hasFile()) {
+    Change file
+    } @else {
+    Choose file
+    }
+</button>
+
+<input #fileInput type="file" (change)="onFileSelected($event)">

frontend/src/upload/file-chooser/file-chooser.component.scss

@@ -0,0 +1,11 @@
+button {
+    width: 100%;
+
+    mat-icon {
+        display: contents;
+    }
+}
+
+input {
+    display: none;
+}

frontend/src/upload/file-chooser/file-chooser.component.ts

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, inject, output, signal, viewChild } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'tc-file-chooser',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+    ],
+    templateUrl: './file-chooser.component.html',
+    styleUrl: './file-chooser.component.scss'
+})
+export class FileChooserComponent {
+    protected fileInput = viewChild<ElementRef>('fileInput')
+    protected readonly file = output<File>();
+    protected readonly hasFile = signal<boolean>(false);
+
+    protected onClick() {
+        this.fileInput()?.nativeElement.click();
+    }
+
+    protected onFileSelected(event: Event) {
+        event.preventDefault();
+
+        const files = (event.target as HTMLInputElement).files ?? [];
+        const file = files.length > 0 ? files[0] : null;
+
+        if (!file) {
+            return;
+        }
+
+        this.file.emit(file);
+        this.hasFile.set(true);
+    }
+}

frontend/src/upload/file-info/file-info.component.html

@@ -0,0 +1,13 @@
+<mat-card class="info-card" appearance="outlined">
+    <mat-card-header>
+        <mat-card-title>
+            {{ file().name || '-'}}
+        </mat-card-title>
+    </mat-card-header>
+    <mat-card-footer class="footer">
+        <mat-chip-set>
+            <mat-chip>{{ file().size | tcReadableBytes }}</mat-chip>
+            <mat-chip>{{ file().type || 'unknown/unknown'}}</mat-chip>
+        </mat-chip-set>
+    </mat-card-footer>
+</mat-card>

frontend/src/upload/file-info/file-info.component.scss

@@ -0,0 +1,17 @@
+ .info-card {
+     width: 100%;
+     margin-bottom: 20px;
+
+     mat-card-header {
+         padding: 16px;
+     }
+
+     button {
+         width: initial;
+         margin: 0 15px 15px 15px;
+     }
+
+     .footer {
+         padding: 16px;
+     }
+ }

frontend/src/upload/file-info/file-info.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { ToReadableBytesPipe } from '../../conversion/to-readable-bytes.pipe';
+
+@Component({
+    selector: 'tc-file-info',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatCardModule,
+        MatChipsModule,
+        ToReadableBytesPipe],
+    templateUrl: './file-info.component.html',
+    styleUrl: './file-info.component.scss'
+})
+export class FileInfoComponent {
+    public readonly file = input.required<File>();
+}

frontend/src/upload/file-uploader/file-uploader.component.html

@@ -0,0 +1,35 @@
+@let configuration = config();
+@let uploadedFile = file();
+@let canUpload = uploadAllowed();
+
+<h1>Upload new file</h1>
+
+<div class="container">
+    @if (configuration !== null) {
+    <tc-configuration [configuration]="configuration"></tc-configuration>
+    }
+
+    @if (uploadedFile) {
+    <tc-file-info [file]="uploadedFile"></tc-file-info>
+    }
+
+    <div class="buttons">
+        <tc-file-chooser (file)="onFile($event)"></tc-file-chooser>
+
+        @if (!uploadedFile || canUpload) {
+        <button mat-flat-button type="file" (click)="onUploadClick()" [disabled]="!canUpload">
+            <mat-icon>cloud_upload</mat-icon>
+            Upload file
+        </button>
+        } @else {
+        <button mat-flat-button type="file" (click)="onUploadClick()" disabled="true">
+            <mat-icon>cloud_upload</mat-icon>
+            File too large.
+        </button>
+        }
+    </div>
+</div>
+
+<p>
+    Some explaination about what this does yada yada
+</p>

frontend/src/upload/file-uploader/file-uploader.component.scss

@@ -0,0 +1,23 @@
+.container {
+    line-break: anywhere;
+
+    .buttons {
+        width: 100%;
+        margin: 15px 0;
+        display: flex;
+        gap: 15px;
+        align-content: stretch;
+        flex-wrap: wrap;
+
+        tc-file-chooser,
+        button {
+            min-width: 150px;
+            flex-grow: 1;
+        }
+    }
+
+    .error-message {
+        display: flex;
+        color: #d00;
+    }
+}

frontend/src/upload/file-uploader/file-uploader.component.ts

@@ -0,0 +1,67 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, DestroyRef, inject, output, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { Configuration, UploadResponse } from '../../http/http.models';
+import { HttpService } from '../../http/http.service';
+import { ConfigurationComponent } from '../configuration/configuration.component';
+import { FileChooserComponent } from '../file-chooser/file-chooser.component';
+import { FileInfoComponent } from '../file-info/file-info.component';
+
+@Component({
+  selector: 'tc-file-uploader',
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatChipsModule,
+    ConfigurationComponent,
+    FileInfoComponent,
+    FileChooserComponent,
+  ],
+  templateUrl: './file-uploader.component.html',
+  styleUrl: './file-uploader.component.scss'
+})
+export class FileUploaderComponent {
+  public readonly encryptedFile = output<UploadResponse>();
+
+  private readonly httpService = inject(HttpService);
+  private readonly destroyRef = inject(DestroyRef)
+
+  protected readonly config = signal<Configuration | null>(null);
+  protected readonly file = signal<File | null>(null);
+
+  protected readonly uploadAllowed = computed(() => {
+    const configuration = this.config();
+    const file = this.file();
+
+    return !!configuration && !!file && file.size <= configuration.BodyMaxSize;
+  });
+
+  constructor() {
+    this.httpService.loadOptions()
+      // TODO: Error handling
+      .pipe(takeUntilDestroyed())
+      .subscribe(this.config.set);
+  }
+
+  protected onFile(file: File) {
+    this.file.set(file);
+  }
+
+  protected onUploadClick() {
+    const file = this.file();
+    if (!file) {
+      return;
+    }
+
+    this.httpService.uploadFile(file)
+      // TODO: Error handling
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(response => this.encryptedFile.emit(response));
+  }
+}

frontend/src/upload/upload-information/upload-information.component.html

@@ -0,0 +1,7 @@
+<div class="container">
+    <h1>Success!</h1>
+    <p>Your file has been uploaded successfully.</p>
+
+    Link to file: /api/files/{{ file().id }}/download<br>
+    Key: {{ file().key }}
+</div>

frontend/src/upload/upload-information/upload-information.component.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, input, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { UploadResponse } from '../../http/http.models';
+
+@Component({
+    selector: 'tc-upload-information',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        MatCardModule,
+        MatChipsModule,
+    ],
+    templateUrl: './upload-information.component.html',
+    styleUrl: './upload-information.component.scss'
+})
+export class UploadInformationComponent {
+    readonly file = input.required<UploadResponse>();
+}

frontend/src/upload/upload.component.html

@@ -0,0 +1,6 @@
+@let file = encryptedFile();
+@if (file) {
+<tc-upload-information [file]="file"></tc-upload-information>
+} @else {
+<tc-file-uploader (encryptedFile)="onEncryptedFile($event)"></tc-file-uploader>
+}

frontend/src/upload/upload.component.scss

@@ -0,0 +1,23 @@
+.container {
+    line-break: anywhere;
+
+    .buttons {
+        width: 100%;
+        margin: 15px 0;
+        display: flex;
+        gap: 15px;
+        align-content: stretch;
+        flex-wrap: wrap;
+
+        tc-file-chooser,
+        button {
+            min-width: 150px;
+            flex-grow: 1;
+        }
+    }
+
+    .error-message {
+        display: flex;
+        color: #d00;
+    }
+}

frontend/src/upload/upload.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { UploadResponse } from '../http/http.models';
+import { FileUploaderComponent } from "./file-uploader/file-uploader.component";
+import { UploadInformationComponent } from './upload-information/upload-information.component';
+
+@Component({
+  selector: 'tc-upload',
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatChipsModule,
+    FileUploaderComponent,
+    UploadInformationComponent,
+  ],
+  templateUrl: './upload.component.html',
+  styleUrl: './upload.component.scss'
+})
+export class UploadComponent {
+  protected readonly encryptedFile = signal<UploadResponse | null>(null);
+
+  protected onEncryptedFile(encryptedFile: UploadResponse) {
+    this.encryptedFile.set(encryptedFile);
+  }
+}

frontend/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

frontend/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}