finalize file upload

Delemangi · Mar 16, 2024 · c277d6b · c277d6b
1 parent bbde370
commit c277d6b
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 19 deletions.
diff --git a/frontend/src/axios/axios-request.ts b/frontend/src/axios/axios-request.ts
@@ -13,12 +13,12 @@ export async function getFilesForSpecifiedUser(accessToken: string | null) : Pro
     });
 }
 
-export function sendFileForSpecifiedUser(accessToken: string | null, file: File) : void
+export async function sendFileForSpecifiedUser(accessToken: string | null, file: File) : void
 {
     const formData = new FormData();
     formData.append('file', file);
 
-    axios.post('http://localhost:8002/files', formData, {
+    await axios.post('http://localhost:8002/files', formData, {
       headers: {
         authorization: `Bearer ${accessToken}`
       }

diff --git a/frontend/src/lib/components/user/FileRow.svelte b/frontend/src/lib/components/user/FileRow.svelte
@@ -3,7 +3,7 @@
   import { File } from '../../types/File';
   import { Download, EyeOpen, Trash, ExternalLink } from 'radix-icons-svelte';
 
-  let file: File = new File('test', 'test', 1, 'test', new Date(2021, 1, 1), new Date(2021, 1, 1));
+  export let file: File = new File('test', 'test', 1, 'test', new Date(2021, 1, 1), new Date(2021, 1, 1),'test');
 
   const useStyles = createStyles((theme : DefaultTheme) => {
         return {
@@ -35,7 +35,7 @@
             {file.name}
         </Text>
         <Text size="sm" css={{ flex: 1 }}>
-            {file.isEncrypted}
+            {file.encrypted}
         </Text>
         <Text size="sm" css={{ flex: 1 }}>
             {file.size}
@@ -46,7 +46,7 @@
         <Text size="sm" css={{ flex: 1 }}>
           {file.expiration}
         </Text>
-        <Flex justify="space-evenly" gap="xs">
+        <Flex justify="left" gap="xs" css={{ flex: 1 }}>
             <Tooltip openDelay={10} label="Preview">
               <Anchor href="/">
                 <ActionIcon variant="filled"

diff --git a/frontend/src/lib/components/user/TitleFileRow.svelte b/frontend/src/lib/components/user/TitleFileRow.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createStyles, type DefaultTheme, ActionIcon, Box, Flex, Text, Tooltip, Anchor } from '@svelteuidev/core';
+  import { File } from '../../types/File';
+  import { Download, EyeOpen, Trash, ExternalLink } from 'radix-icons-svelte';
+
+  export let file: File = new File('test', 'test', 1, 'test', new Date(2021, 1, 1), new Date(2021, 1, 1),'test');
+
+  const useStyles = createStyles((theme : DefaultTheme) => {
+        return {
+          root: {
+            [`${theme.dark} &`]: {
+              bc: theme.fn.themeColor('dark', 5),
+              color: 'white'
+            },
+            backgroundColor: '$gray20',
+            textAlign: 'center',
+            padding: '$10',
+            borderRadius: '$md',
+            '&:hover': {
+                backgroundColor: '$gray50',
+            },
+          },
+          textStyle: {
+            flex: 1
+          }
+
+        }}
+    );
+
+    $: ({ classes, getStyles } = useStyles());
+
+</script>
+
+<Box
+    class={getStyles()}
+>
+    <Flex align="center" justify="space-evenly" style="height: 100%;">
+        <Text size="sm" class={classes.textStyle}>
+            File name
+        </Text>
+        <Text size="sm" class={classes.textStyle}>
+            Encrypted
+        </Text>
+        <Text size="sm" class={classes.textStyle}>
+            Size (MB)
+        </Text>
+        <Text size="sm" class={classes.textStyle}>
+            Upload date
+        </Text>
+        <Text size="sm" class={classes.textStyle}>
+            Expiration date
+        </Text>
+        <Text size="sm" class={classes.textStyle}>
+          Actions
+        </Text>
+    </Flex>
+</Box>
diff --git a/frontend/src/lib/types/File.ts b/frontend/src/lib/types/File.ts
@@ -2,16 +2,18 @@ export class File {
     id: string;
     name: string;
     size: number;
-    isEncrypted: string;
+    encrypted: string;
+    path: string;
     timestamp: Date;
     expiration: Date;
 
-    constructor(id: string, name: string, size: number, type: string, timestamp: Date, expiration: Date) {
+    constructor(id: string, name: string, size: number, encrypted: string, timestamp: Date, expiration: Date, path: string) {
       this.id = id;
       this.name = name;
       this.size = size;
-      this.isEncrypted = type;
+      this.encrypted = encrypted;
       this.timestamp = timestamp;
       this.expiration = expiration;
+      this.path = path;
     }
 }
diff --git a/frontend/src/routes/user/home/+page.svelte b/frontend/src/routes/user/home/+page.svelte
@@ -3,18 +3,19 @@
   import { createStyles, Button, Box, Flex, Text, Overlay, Title, type DefaultTheme } from "@svelteuidev/core";
   import FileRow from "$lib/components/user/FileRow.svelte";
   import { getFilesForSpecifiedUser, sendFileForSpecifiedUser } from "../../../axios/axios-request";
+  import TitleFileRow from "$lib/components/user/TitleFileRow.svelte";
 
-  let files : FileList | null = null;
+  let filesToUpload : FileList | null = null;
 
-  function sendData() {
-    if (files != null) {
-      console.log(files);
-      sendFileForSpecifiedUser(localStorage.getItem('accessToken'), files[0]);
+  async function sendData() : Promise<void> {
+    if (filesToUpload != null) {
+      console.log(filesToUpload);
+      await sendFileForSpecifiedUser(localStorage.getItem('accessToken'), filesToUpload[0]);
+      window.location.reload();
     }
     else
     {
       console.log("No file selected");
-
     }
   }
   const useStyles = createStyles((theme : DefaultTheme) => {
@@ -42,27 +43,33 @@
 
   $: ({ classes, getStyles } = useStyles());
 
+  let userFiles : File[] = [];
+
   onMount(async function () {
     let accessToken = localStorage.getItem('accessToken');
-    const response = await getFilesForSpecifiedUser(accessToken);
-    console.log(response);
+    userFiles = await getFilesForSpecifiedUser(accessToken);
   });
   let visible = false;
 </script>
 
 <Button on:click={() => visible = !visible}>Upload file</Button>
-<FileRow></FileRow>
+
+<TitleFileRow/>
+
+{#each userFiles as file}
+  <FileRow file={file} />
+{/each}
 
 {#if visible}
 <Overlay opacity={0.9} color="#000" zIndex={5} center class={classes.flexOverlay}>
   <Box class={getStyles()}>
     <Flex direction="column" align="space-evenly" gap="md" justify="center">
       <Title order={3}>Upload your file</Title>
 
-      <input type="file" id="myFile" name="filename" bind:files>
+      <input type="file" id="myFile" name="filename" bind:files={filesToUpload}>
 
       <Flex justify="space-around" align="center">
-        <Button variant='filled' on:click={sendData}>Submit</Button>
+        <Button variant='filled' on:click={async () => await sendData()}>Submit</Button>
         <Button variant='light' on:click={() => visible = false}>Close</Button>
       </Flex>
     </Flex>