Updated Upload error

- Added header expose
- Updated download UI logic

frontend/src/app/download/download.component.html

@@ -9,7 +9,7 @@
       type="password" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter file password..." [(ngModel)]="filePassword"/>
 
 
-    <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" (click)="checkFile()">
+    <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" (click)="requestDownload()">
       Download
     </button>
     <button

frontend/src/app/download/download.component.ts

@@ -23,12 +23,14 @@ export class DownloadComponent {
   filePassword: string = "";
   downloadInfo: DownloadInfo | null = null;
 
+  waitingForPassword: boolean = false;
+
 
   constructor(private developmentStore: DevelopmentStore) {
     this.speedTest();
   }
 
-  checkFile() {
+  requestDownload() {
 
     console.log(this.inputFileId);
     this.fileId = this.inputFileId; // TODO: Implement link extraction logic
@@ -36,8 +38,19 @@ export class DownloadComponent {
     this.getDownloadInfo();
   }
 
-  checkPassword() {
-
+  processDownloadInfo() {
+    if(!this.downloadInfo?.passwordProtected && this.downloadInfo?.downloadable) {
+      console.log("Proceeding with download");
+      this.downloadFile();
+      return;
+    }
+    else if(!this.downloadInfo?.downloadable) {
+      this.download_not_possible?.nativeElement.showModal();
+      return;
+    }
+    else if(this.downloadInfo?.passwordProtected) {
+      console.log("Password protected");
+    }
   }
 
   private speedTest() {
@@ -77,12 +90,58 @@ export class DownloadComponent {
     .then(response => {
       this.downloadInfo = response.data;
       console.log(response.data);
-      return response.data;
+      this.processDownloadInfo();
     })
     .catch(error => {
       console.error('Error during download info request:', error);
     });
   }
+
+  private downloadFile() {
+    axios({
+      method: 'get',
+      url: this.developmentStore.getBaseUrl() + 'api/v1/download?fileId=' + this.fileId,
+      responseType: 'arraybuffer',
+      headers: {
+        'Access-Control-Allow-Origin': '*', // Allow CORS
+      },
+      onDownloadProgress: function(progressEvent) {
+        // Calculate the percentage of download completed
+        if(progressEvent.total) {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          console.log(percentCompleted + '%'); // Log the percentage or update any progress UI component
+        }
+      }
+    })
+    .then(response => {
+      const contentDisposition = response.headers['content-disposition'];
+      let filename = "default_filename"; // Default filename in case parsing fails
+
+      if (contentDisposition) {
+        const filenameRegex = /filename="?([^"]+)"?/;
+        const matches = contentDisposition.match(filenameRegex);
+        if (matches && matches[1]) {
+          filename = matches[1];
+        }
+      }
+
+      const blob = new Blob([response.data], {type: 'application/octet-stream'});
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.style.display = 'none';
+      a.href = url;
+      a.download = filename; // You can specify a filename here
+      document.body.appendChild(a);
+      a.click();
+
+      // Clean up by revoking the Blob URL and removing the temporary anchor
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    })
+    .catch(error => {
+      console.error('Error during download request:', error);
+    });
+  }
 }
 interface DownloadInfo {
   downloadable: boolean;