Add support for click to select image

README.md

@@ -1,3 +1,13 @@
+<div align="center">
+	<img style="border-radius: 20px" src="public/favicon.png" width="96">
+	<h1>Blur</h1>
+	<h3>Blurs any photos. Useful for backgrounds, wallpapers and more.</h3>
+	<br>
+	<h4><a href="https://blur.brainbox.no">Open App</a></h4>
+</div>
+<br>
+<br>
+
 # Blur
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.9.

src/app/app.component.css

@@ -18,6 +18,7 @@
   border: 4px dashed #ccc;
   border-radius: 4px;
   padding: 20px;
+  cursor: pointer;
 }
 
 .result {

src/app/app.component.html

@@ -1,6 +1,11 @@
-<div class="container" [class.has-image]="imageUrl" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+<div class="container" [class.has-image]="imageUrl" 
+     (dragover)="onDragOver($event)" 
+     (drop)="onDrop($event)"
+     (click)="!imageUrl && fileInput.click()">
+  <input #fileInput type="file" accept="image/*" (change)="onFileSelected($event)" style="display: none">
+
   @if (!imageUrl) {
-    <p>Drag any photo to this window.</p>
+    <p>Drag any photo to this window or click to select.</p>
   }
 
   @if (isProcessing) {
@@ -18,7 +23,7 @@
         </div>
         <div class="button-group">
           <button (click)="downloadImage()">Download Blurred Image</button>
-          <button class="reset" (click)="reset()">Reset</button>
+          <button class="reset" (click)="reset(); $event.stopPropagation()">Reset</button>
         </div>
       </div>
     </div>

src/app/app.component.ts

@@ -34,6 +34,19 @@ export class AppComponent {
     }
   }
 
+  async onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file && file.type.startsWith('image/')) {
+      this.isProcessing = true;
+      this.imageUrl = await this.readFile(file);
+      await this.processImage();
+      this.isProcessing = false;
+    }
+    // Reset input value to allow selecting the same file again
+    input.value = '';
+  }
+
   async processImage() {
     if (this.imageUrl) {
       this.blurredImageUrl = await this.applyBlur(this.imageUrl);