significantly increased file-download-speed

diff --git a/backend/server/routers/logs.py b/backend/server/routers/logs.py
index bb0e0b61a4042b033f4bdc467417d3d321d97ad3..181f1cc4a31ea27e542ce610ba3ec6594b6ca44d 100644 (file)
--- a/backend/server/routers/logs.py
+++ b/backend/server/routers/logs.py
@@ -1,8 +1,10 @@
 import base64
 import datetime
+import io
 import logging
 import re
 from fastapi import APIRouter, Cookie, Depends, Form, UploadFile, File, HTTPException
+from fastapi.responses import StreamingResponse
 from pydantic import BaseModel
 from . import users
 from ..utils import fileHandling
@@ -252,8 +254,7 @@ async def uploadFile(day: Annotated[int, Form()], month: Annotated[int, Form()],
     content:dict = fileHandling.getDay(cookie["user_id"], year, month)
 
     enc_filename = security.encrypt_text(file.filename, enc_key)
-    enc_type = security.encrypt_text(file.headers.get("content-type"), enc_key)
-    new_file = {"enc_filename": enc_filename, "uuid_filename": uuid,"size": file.size, "enc_type": enc_type}
+    new_file = {"enc_filename": enc_filename, "uuid_filename": uuid,"size": file.size}
 
     if "days" not in content.keys():
         content["days"] = []
@@ -325,4 +326,5 @@ async def downloadFile(uuid: str, cookie = Depends(users.isLoggedIn)):
     file = fileHandling.readFile(cookie["user_id"], uuid)
     if file is None:
         raise HTTPException(status_code=500, detail="Failed to read file")
-    return {"file": base64.b64encode(security.decrypt_file(file, enc_key))}
\ No newline at end of file
+    content = security.decrypt_file(file, enc_key)
+    return StreamingResponse(iter([content]))
\ No newline at end of file

diff --git a/frontend/src/routes/write/+page.svelte b/frontend/src/routes/write/+page.svelte
index 7ecad18e03210fe9dbeef38b616a8a52e56e48d9..88374913dcea654619f97f59ccaa1f0e72055593 100644 (file)
--- a/frontend/src/routes/write/+page.svelte
+++ b/frontend/src/routes/write/+page.svelte
@@ -78,16 +78,16 @@
 
        let loading = false;
        $effect(() => {
-               if (loading) return;
-               loading = true;
-
                if ($selectedDate !== lastSelectedDate) {
-                       images = [];
-                       filesOfDay = [];
-
                        cancelDownload.abort();
                        cancelDownload = new AbortController();
 
+                       if (loading) return;
+                       loading = true;
+
+                       images = [];
+                       filesOfDay = [];
+
                        clearTimeout(timeout);
                        const result = getLog();
                        if (result) {
@@ -208,13 +208,15 @@
                                        axios
                                                .get(API_URL + '/logs/downloadFile', {
                                                        params: { uuid: file.uuid_filename },
+                                                       responseType: 'blob',
                                                        signal: cancelDownload.signal
                                                })
                                                .then((response) => {
+                                                       const url = URL.createObjectURL(new Blob([response.data]));
                                                        images = images.map((image) => {
                                                                if (image.uuid_filename === file.uuid_filename) {
-                                                                       image.src = response.data.file;
-                                                                       file.src = response.data.file;
+                                                                       image.src = url;
+                                                                       file.src = url;
                                                                }
                                                                return image;
                                                        });
@@ -393,7 +395,7 @@
                        return;
                }
 
-               // download from server
+               // otherwise: download from server
 
                filesOfDay = filesOfDay.map((f) => {
                        if (f.uuid_filename === uuid) {
@@ -407,12 +409,14 @@
                        onDownloadProgress: (progressEvent) => {
                                filesOfDay = filesOfDay.map((file) => {
                                        if (file.uuid_filename === uuid) {
-                                               file.downloadProgress = Math.round(progressEvent.progress * 100);
+                                               file.downloadProgress = Math.round((progressEvent.loaded / file.size) * 100);
+                                               console.log(progressEvent);
                                        }
                                        return file;
                                });
                        },
-                       signal: cancelDownload.signal
+                       signal: cancelDownload.signal,
+                       responseType: 'blob'
                };
 
                axios
@@ -420,9 +424,10 @@
                                ...config
                        })
                        .then((response) => {
+                               const url = URL.createObjectURL(new Blob([response.data]));
                                filesOfDay = filesOfDay.map((f) => {
                                        if (f.uuid_filename === uuid) {
-                                               f.src = response.data.file;
+                                               f.src = url;
                                        }
                                        return f;
                                });
@@ -459,15 +464,13 @@
                        }
                }
 
-               const blob = new Blob([base64ToArrayBuffer(file.src)], {
-                       type: 'application/octet-stream'
-               });
-               const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
-               a.href = url;
+               a.href = file.src;
                a.download = file.filename;
                document.body.appendChild(a);
+               console.log(a);
                a.click();
+               document.body.removeChild(a);
        }
 
        let confirmDelete = $state({ uuid: '', filename: '' });
@@ -586,12 +589,7 @@
                                                transition:slide={{ axis: 'x' }}
                                        >
                                                {#if image.src}
-                                                       <img
-                                                               transition:fade
-                                                               class="image"
-                                                               alt={image.filename}
-                                                               src={'data:image/' + image.filename.split('.').pop() + ';base64,' + image.src}
-                                                       />
+                                                       <img transition:fade class="image" alt={image.filename} src={image.src} />
                                                {:else}
                                                        <div class="spinner-border" role="status">
                                                                <span class="visually-hidden">Loading...</span>
@@ -819,11 +817,7 @@
                                                <div class="carousel-inner">
                                                        {#each images as image, i (image.uuid_filename)}
                                                                <div id="carousel-item-{i}" class="carousel-item">
-                                                                       <img
-                                                                               src={'data:image/' + image.filename.split('.').pop() + ';base64,' + image.src}
-                                                                               class="d-block w-100"
-                                                                               alt={image.filename}
-                                                                       />
+                                                                       <img src={image.src} class="d-block w-100" alt={image.filename} />
                                                                        <div class="carousel-caption d-none d-md-block">
                                                                                <span class="imageLabelCarousel">{image.filename}</span>
                                                                                <button