diff --git a/frontend/package.json b/frontend/package.json
index c6c84bc..e8d93b1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -53,7 +53,6 @@
     "moment": "^2.30.1",
     "ng-mat-select-infinite-scroll": "^4.0.0",
     "ngx-auto-unsubscribe-decorator": "^1.1.0",
-    "ngx-dropzone": "^3.1.0",
     "ngx-moment": "^6.0.2",
     "picsur-shared": "workspace:^",
     "reflect-metadata": "^0.2.2",
@@ -64,5 +63,8 @@
     "webpack-bundle-analyzer": "^4.10.2",
     "zod": "^3.23.8",
     "zone.js": "~0.14.0"
+  },
+  "dependencies": {
+    "@ngx-dropzone/cdk": "^18.1.1"
   }
 }
diff --git a/frontend/src/app/routes/upload/dropzone/dropzone.component.html b/frontend/src/app/routes/upload/dropzone/dropzone.component.html
new file mode 100644
index 0000000..97a8925
--- /dev/null
+++ b/frontend/src/app/routes/upload/dropzone/dropzone.component.html
@@ -0,0 +1,3 @@
+<div class="dropzone" (click)="onContainerClick()">
+  <ng-content></ng-content>
+</div>
diff --git a/frontend/src/app/routes/upload/dropzone/dropzone.component.scss b/frontend/src/app/routes/upload/dropzone/dropzone.component.scss
new file mode 100644
index 0000000..bb71e37
--- /dev/null
+++ b/frontend/src/app/routes/upload/dropzone/dropzone.component.scss
@@ -0,0 +1,6 @@
+.dropzone {
+  cursor: pointer;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
diff --git a/frontend/src/app/routes/upload/dropzone/dropzone.component.ts b/frontend/src/app/routes/upload/dropzone/dropzone.component.ts
new file mode 100644
index 0000000..f53540f
--- /dev/null
+++ b/frontend/src/app/routes/upload/dropzone/dropzone.component.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { DropzoneComponent } from "@ngx-dropzone/cdk";
+
+@Component({
+  selector: "my-dropzone",
+  templateUrl: "./dropzone.component.html",
+  styleUrls: ["./dropzone.component.scss"],
+})
+export class CustomDropzone extends DropzoneComponent {
+  onContainerClick() {
+    this.openFilePicker();
+  }
+}
diff --git a/frontend/src/app/routes/upload/upload.component.html b/frontend/src/app/routes/upload/upload.component.html
index 37a96a7..1c0e1c3 100644
--- a/frontend/src/app/routes/upload/upload.component.html
+++ b/frontend/src/app/routes/upload/upload.component.html
@@ -1,10 +1,11 @@
 <div class="content-border">
-  <ngx-dropzone *ngIf="canUpload" (change)="onSelect($event)">
+  <my-dropzone *ngIf="canUpload">
+    <input type="file" fileInput [formControl]="fileControl" />
     <div class="centered">
       <h1>Upload Image</h1>
       <p>Drag and drop / paste an image here, or click to select an image</p>
     </div>
-  </ngx-dropzone>
+  </my-dropzone>
 
   <div class="centered" *ngIf="!canUpload">
     <h1><a routerLink="/user/login">Please log in</a></h1>
diff --git a/frontend/src/app/routes/upload/upload.component.ts b/frontend/src/app/routes/upload/upload.component.ts
index c9684ef..f3bc6c4 100644
--- a/frontend/src/app/routes/upload/upload.component.ts
+++ b/frontend/src/app/routes/upload/upload.component.ts
@@ -1,7 +1,8 @@
 import { Component, HostListener, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
+import { FileInputValue } from '@ngx-dropzone/cdk';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
-import { NgxDropzoneChangeEvent } from 'ngx-dropzone';
 import { Permission } from 'picsur-shared/dist/dto/permissions.enum';
 import { Fail, FT } from 'picsur-shared/dist/types/failable';
 import { debounceTime } from 'rxjs';
@@ -19,6 +20,8 @@ export class UploadComponent implements OnInit {
 
   canUpload = true;
 
+  fileControl = new FormControl<FileInputValue>(null);
+
   constructor(
     private readonly router: Router,
     private readonly permissionService: PermissionService,
@@ -27,6 +30,17 @@ export class UploadComponent implements OnInit {
 
   ngOnInit(): void {
     this.onPermission();
+    this.onFileChange();
+  }
+
+  @AutoUnsubscribe()
+  onFileChange() {
+    return this.fileControl.valueChanges.subscribe((file) => {
+      if (!file) return;
+      let files = Array.isArray(file) ? file : [file];
+      const metadata: ProcessingViewMeta = new ProcessingViewMeta(files);
+      this.router.navigate(['/processing'], { state: metadata });
+    });
   }
 
   @AutoUnsubscribe()
@@ -37,14 +51,7 @@ export class UploadComponent implements OnInit {
         this.canUpload = permissions.includes(Permission.ImageUpload);
       });
   }
-
-  onSelect(event: NgxDropzoneChangeEvent) {
-    const metadata: ProcessingViewMeta = new ProcessingViewMeta(
-      event.addedFiles,
-    );
-    this.router.navigate(['/processing'], { state: metadata });
-  }
-
+  
   @HostListener('document:paste', ['$event'])
   onPaste(event: ClipboardEvent) {
     const items = event.clipboardData?.items;
diff --git a/frontend/src/app/routes/upload/upload.module.ts b/frontend/src/app/routes/upload/upload.module.ts
index bae264d..46bd0fd 100644
--- a/frontend/src/app/routes/upload/upload.module.ts
+++ b/frontend/src/app/routes/upload/upload.module.ts
@@ -1,17 +1,20 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NgxDropzoneModule } from 'ngx-dropzone';
+import { ReactiveFormsModule } from '@angular/forms';
+import { DropzoneCdkModule } from '@ngx-dropzone/cdk';
+import { ErrorManagerModule } from '../../util/error-manager/error-manager.module';
+import { CustomDropzone } from './dropzone/dropzone.component';
 import { UploadComponent } from './upload.component';
 import { UploadRoutingModule } from './upload.routing.module';
-import { ErrorManagerModule } from '../../util/error-manager/error-manager.module';
 
 @NgModule({
-  declarations: [UploadComponent],
+  declarations: [UploadComponent, CustomDropzone],
   imports: [
     CommonModule,
     ErrorManagerModule,
     UploadRoutingModule,
-    NgxDropzoneModule,
+    ReactiveFormsModule,
+    DropzoneCdkModule,
   ],
 })
 export default class UploadRouteModule {}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45b8eed..c69750f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -215,6 +215,10 @@ importers:
         version: 5.5.4
 
   frontend:
+    dependencies:
+      '@ngx-dropzone/cdk':
+        specifier: ^18.1.1
+        version: 18.1.1(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/forms@18.2.9(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.9(@angular/animations@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1))(rxjs@7.8.1)
     devDependencies:
       '@angular-builders/custom-webpack':
         specifier: ^18.0.0
@@ -330,9 +334,6 @@ importers:
       ngx-auto-unsubscribe-decorator:
         specifier: ^1.1.0
         version: 1.1.0
-      ngx-dropzone:
-        specifier: ^3.1.0
-        version: 3.1.0
       ngx-moment:
         specifier: ^6.0.2
         version: 6.0.2(moment@2.30.1)
@@ -2111,6 +2112,14 @@ packages:
       '@angular/common': '>=12.0.0'
       '@angular/core': '>=12.0.0'
 
+  '@ngx-dropzone/cdk@18.1.1':
+    resolution: {integrity: sha512-h6MXBn6MWo+53xpQXMpPSTWOMQGNA3rvrVmet5uIYfFR4P9G8JxXExxpmYKDOXxZB3nHEGWt10ZCyKBmkQPEfQ==}
+    peerDependencies:
+      '@angular/common': ^18.0.0
+      '@angular/core': ^18.0.0
+      '@angular/forms': ^18.0.0
+      rxjs: ^7.4.0
+
   '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
     resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
 
@@ -4531,10 +4540,6 @@ packages:
   ngx-auto-unsubscribe-decorator@1.1.0:
     resolution: {integrity: sha512-aNlkAaO5SvbKBXvbDHhOpYkcMsUkhZbLRzS8K5GT6ZjJ5HAkiSPHiEclvGn/a8MYkOIwFvNdmp3PyjcoS2eYMw==}
 
-  ngx-dropzone@3.1.0:
-    resolution: {integrity: sha512-5RBaEl07QUcY6sv/BBPyIxN6nbWY/KqTGheEKgbuGS0N1QPFY7NJUo8+X3fYUwQgLS+wjJeqPiR37dd0YNDtWA==}
-    deprecated: This package is deprecated and will no longer receive any updates. Please take a look at the official successor repo at hackingharold/ngx-dropzone
-
   ngx-moment@6.0.2:
     resolution: {integrity: sha512-HUvDyoJPZKLA3tc+GMQqDpVyCVT2SPfEiV7/CGj2Dwwsn//JhhQ8eTr+RzKqBzLysrXkCwlzulVVJaJ5A0FJEA==}
     peerDependencies:
@@ -8596,6 +8601,14 @@ snapshots:
       '@angular/core': 18.2.9(rxjs@7.8.1)(zone.js@0.14.10)
       tslib: 2.8.0
 
+  '@ngx-dropzone/cdk@18.1.1(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/forms@18.2.9(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.9(@angular/animations@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1))(rxjs@7.8.1)':
+    dependencies:
+      '@angular/common': 18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1)
+      '@angular/core': 18.2.9(rxjs@7.8.1)(zone.js@0.14.10)
+      '@angular/forms': 18.2.9(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.9(@angular/animations@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1)
+      rxjs: 7.8.1
+      tslib: 2.8.0
+
   '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
     optional: true
 
@@ -11218,10 +11231,6 @@ snapshots:
     dependencies:
       tslib: 2.8.0
 
-  ngx-dropzone@3.1.0:
-    dependencies:
-      tslib: 2.8.0
-
   ngx-moment@6.0.2(moment@2.30.1):
     dependencies:
       moment: 2.30.1