Added FileUpload logic

- Added smoother for progress indicator

frontend/src/app/upload/upload.component.html

@@ -46,7 +46,7 @@
       <button class="btn btn-primary w-full max-w-xs" (click)="startUpload()">Upload File</button>
     </div>
     <div *ngIf="uploadStarted && fileToUpload && !uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-500">
-      <div class="radial-progress" [style.--value]="uploadProgress" style="--size:12rem; --thickness: 2rem;" role="progressbar">{{uploadProgress}}%</div>
+      <div class="radial-progress" [style.--value]="uploadProgress" style="--size:12rem; --thickness: 2rem;" role="progressbar">{{ uploadProgress | number:'1.0-0' }}%</div>
       <p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
     </div>
     <div *ngIf="uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-1000">

frontend/src/app/upload/upload.component.ts

@@ -1,8 +1,9 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
-import {NgIf} from "@angular/common";
+import {DecimalPipe, NgIf} from "@angular/common";
 import {FormatFileSizePipePipe} from "../format-file-size-pipe.pipe";
 import {FormsModule} from "@angular/forms";
-import axios from "axios";
+import axios, {AxiosProgressEvent} from "axios";
+import { DevelopmentStore } from '../../store/DevelopmentStore';
 
 @Component({
   selector: 'app-upload',
@@ -10,7 +11,8 @@ import axios from "axios";
   imports: [
     NgIf,
     FormatFileSizePipePipe,
-    FormsModule
+    FormsModule,
+    DecimalPipe
   ],
   templateUrl: './upload.component.html',
   styleUrl: './upload.component.scss'
@@ -22,16 +24,21 @@ export class UploadComponent {
 
   shortStorage: boolean = false;
   singleDownload: boolean = false;
+  fileDescription: string = '';
   passwordProtected: boolean = false;
-  password: string = '';
+  password: string = 'nigga123';
 
   uploadStarted: boolean = false;
-  uploadProgress = 0;
+  uploadProgress = 0; // Real progress
+  targetUploadProgress = 0; // New target progress to reach
+
   uploadFinished = false;
 
   uploadSpeedBps: number = 0;
 
-  constructor() {
+
+
+  constructor(private developmentStore: DevelopmentStore) {
     this.uploadSpeedTest();
   }
 
@@ -63,16 +70,37 @@ export class UploadComponent {
       const file = files[i];
       this.fileToUpload = file;
     }
+    this.calculateEstimatedUploadTime();
   }
 
   startUpload(): void {
     if (this.fileToUpload) {
       console.log(`Uploading file: ${this.fileToUpload.name}, Short storage: ${this.shortStorage}, Single download: ${this.singleDownload}, Password protected: ${this.passwordProtected}`);
       this.uploadStarted = true;
+      const formData = this.buildFormDataObject();
 
-      this.calculateEstimatedUploadTime();
+      const config = {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          'Access-Control-Allow-Origin': '*', // Allow CORS
+        },
+        onUploadProgress: (progressEvent: AxiosProgressEvent) => {
+          // @ts-ignore
+          this.targetUploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
+          this.smoothProgressUpdate();
+        }
+      };
+
+      axios.post(this.developmentStore.getBaseUrl() + 'api/v1/upload', formData, config)
+      .then(response => {
+        console.log('Upload completed successfully:', response.data);
+      })
+      .catch(error => {
+        console.error('Upload failed:', error.response ? error.response.data : error.message);
+      });
 
 
+      /*// Old simulation of upload progress
       const interval = setInterval(() => {
         if (this.uploadProgress < 100) {
           this.uploadProgress++;
@@ -80,11 +108,21 @@ export class UploadComponent {
           clearInterval(interval); // Stop the interval when progress reaches 100%
           this.uploadFinished = true;
         }
-      }, 10);
+      }, 10);*/
 
     }
   }
 
+  buildFormDataObject(): FormData {
+    const formData = new FormData();
+    formData.append('file', this.fileToUpload as Blob);
+    formData.append('password', this.passwordProtected ? this.password : '');
+    formData.append('singleDownload', this.singleDownload.toString());
+    formData.append('shortStorage', this.shortStorage.toString());
+    formData.append('fileDescription', this.fileDescription);
+    return formData;
+  }
+
   private uploadSpeedTest() {
     const start = new Date().getTime(); // Start timer
 
@@ -127,4 +165,14 @@ export class UploadComponent {
       console.log(`Estimated upload time: ${estimatedTimeInSeconds} seconds`);
     }
   }
+
+  smoothProgressUpdate() {
+    if (this.uploadProgress < this.targetUploadProgress) {
+      this.uploadProgress += 0.01 * (this.targetUploadProgress - this.uploadProgress);
+      requestAnimationFrame(this.smoothProgressUpdate.bind(this));
+    } else if (this.uploadProgress > this.targetUploadProgress) {
+      // Handle overshoot
+      this.uploadProgress = this.targetUploadProgress;
+    }
+  }
 }

frontend/src/store/DevelopmentStore.ts

@@ -8,7 +8,7 @@ import { Injectable } from '@angular/core';
  * This store automatically identifies if the env is production or development.
  * If this app is running on development mode, it will add port 80 to the base url.
  */
-export class EnvironmentService {
+export class DevelopmentStore {
   private isDevelopment: boolean;
 
   constructor() {