feat: upload progress bar

frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { AxiosProgressEvent } from "axios";
 	import { fetchSubmProgress } from "$lib/stores/portfolio";
 	import { apiUploadCoverLetter } from "$lib/@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
-    const onFileDrop = async (file: File) => {
+    const onFileDrop = async (detail: any) => {
-        await apiUploadCoverLetter(file, (progressEvent: AxiosProgressEvent) => {
+        const file = detail.file;
-            console.log(progressEvent.progress)
+        const callback = detail.callback;
-        });
+        await apiUploadCoverLetter(file, callback);
         await fetchSubmProgress();
     }
 

frontend/src/lib/components/dashboard/DashboardUploadCard.svelte

@@ -4,6 +4,8 @@
 	import { submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
 	import { createEventDispatcher } from 'svelte';
 	import StatusNotification from './StatusNotification.svelte';
+	import ProgressBar from './ProgressBar.svelte';
+	import type { AxiosProgressEvent } from 'axios';
 
 	const dispatch = createEventDispatcher();
 
@@ -12,6 +14,10 @@
 	export let filesize: string;
 	export let fileType: number;
 
+	let fileDropped: boolean = false;
+	let progress: number = 1;
+	let bytesTotal: number = 0;
+
 	let status: Status;
 
 	$: if ($submissionProgress) {
@@ -62,40 +68,66 @@
 	const onFileDrop = (dropped: Dropped) => {
 		console.log(dropped);
 		if (dropped.accepted.length > 0) {
-			dispatch('filedrop', dropped.accepted[0]);
+			fileDropped = true;
+			const file = dropped.accepted[0];
+			// send the request in outer component
+			dispatch('filedrop', {
+				file: file,
+				callback: (progressEvent: AxiosProgressEvent) => {
+					console.log(progressEvent.bytes);
+					progress = progressEvent.progress!;
+					bytesTotal = progressEvent.total ?? 0;
+				}
+			});
 		}
 	};
 </script>
 
 <div class="card uploadCard">
 	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
-		<h3>{title}</h3>
+		<h3 class="">{title}</h3>
 		<StatusNotification {status} />
 		<div class="mt-1 sm:mt-0">
 			<FileType {filetype} {filesize} />
 		</div>
 	</div>
-	<div class="flex-1 mt-6">
+	{#if fileDropped}	
-		<FileDrop
+		<div class="flex content-around justify-between items-center mb-5 ml-5 mr-5">
-			multiple={false}
+			<svg class="w-35 h-35" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
-			maxSize={filetype == 'PDF' ? 100_000_000 : 10_000_000}
+			<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"><line x1="0" y="0" x2="0" y2="40" stroke="#406280ff" stroke-width="2" stroke-dasharray="3"></line></svg>
-			accept={filetype == 'PDF' ? 'application/pdf' : 'application/zip'}
+			<div class="items-center">
-			
+				<h2 class="text-xl">Nahráno {((bytesTotal / 1_000_000) * progress).toFixed(1)} MB</h2>
-			on:filedrop={(e) => onFileDrop(e.detail.files)}
+				<h2 class="text-xl self-center">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
-			on:filedragenter={dashAnimationStart}
-			on:filedragleave={dashAnimationStop}
-		>
-			<div
-				class="drag group"
-				on:mouseenter={dashAnimationStart}
-				on:mouseleave={dashAnimationStop}
-				style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
-			>
-				<span class="text-[#406280]">Sem přetáhněte,</span>
-				<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
 			</div>
-		</FileDrop>
+			<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"><line x1="0" y="0" x2="0" y2="40" stroke="#406280ff" stroke-width="2" stroke-dasharray="3"></line></svg>
-	</div>
+			<div class="items-center text-center">
+				<h2 class="text-2xl text-sspsBlueDark font-bold mb-2">{Math.round(progress * 100) + "%"}</h2>
+				<ProgressBar progress={progress}></ProgressBar>
+			</div>
+		</div>
+	{:else}
+		<div class="flex-1 mt-6">
+			<FileDrop
+				multiple={false}
+				maxSize={filetype == 'PDF' ? 100_000_000 : 10_000_000}
+				accept={filetype == 'PDF' ? 'application/pdf' : 'application/zip'}
+				
+				on:filedrop={(e) => onFileDrop(e.detail.files)}
+				on:filedragenter={dashAnimationStart}
+				on:filedragleave={dashAnimationStop}
+			>
+				<div
+					class="drag group"
+					on:mouseenter={dashAnimationStart}
+					on:mouseleave={dashAnimationStop}
+					style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
+				>
+					<span class="text-[#406280]">Sem přetáhněte,</span>
+					<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
+				</div>
+			</FileDrop>
+		</div>
+	{/if}
 </div>
 
 <style>

frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { AxiosProgressEvent } from "axios";
 	import { fetchSubmProgress } from "$lib/stores/portfolio";
 	import { apiUploadPortfolioLetter } from "../../@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
-    const onFileDrop = async (file: File) => {
+    const onFileDrop = async (detail: any) => {
-        await apiUploadPortfolioLetter(file, (progressEvent: AxiosProgressEvent) => {
+        const file = detail.file;
-            console.log(progressEvent.loaded)
+        const callback = detail.callback;
-        });
+        await apiUploadPortfolioLetter(file, callback);
         await fetchSubmProgress();
     }
 

frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { AxiosProgressEvent } from "axios";
 	import { fetchSubmProgress } from "$lib/stores/portfolio";
 	import { apiUploadPortfolioZip } from "$lib/@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
-    const onFileDrop = async (file: File) => {
+    const onFileDrop = async (detail: any) => {
-        await apiUploadPortfolioZip(file, (progressEvent: AxiosProgressEvent) => {
+        const file = detail.file;
-            console.log(progressEvent.loaded)
+        const callback = detail.callback;
-        });
+        await apiUploadPortfolioZip(file, callback);
         await fetchSubmProgress();
     }
 

frontend/src/lib/components/dashboard/ProgressBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    export let progress: number;
+</script>
+
+<div class="progress-bar">
+    <svg class="animated animate-ease-linear"
+         width="40mm"
+         height="8mm"
+         viewBox="0 0 50 6"
+         version="1.1"
+         xmlns="http://www.w3.org/2000/svg">
+
+        <line x1="5" y1="3" x2="45" y2="3" stroke="#e6e6e6" stroke-width="6" stroke-linecap="round" />
+
+        {#if progress === 1}
+            <line x1="5" y1="3" x2={progress * 45} y2="3" stroke="#35e000ff" stroke-width="3" stroke-linecap="round" />
+        {:else}
+            <line x1="5" y1="3" x2={progress * 45} y2="3" stroke="#75bff8ff" stroke-width="3" stroke-linecap="round" />
+        {/if}
+    >
+    </svg>
+</div>