file deleting

src/components/Controlbar.tsx

@@ -32,7 +32,7 @@ export default component$(() => {
         }
     })
     return (
-        <div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-neutral-950/50 backdrop-blur-3xl w-1/3 p-2 rounded-lg flex items-center justify-between">
+        <div class="z-[999999999] fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-neutral-950/50 backdrop-blur-3xl w-1/3 p-2 rounded-lg flex items-center justify-between">
             <input 
                 type="file" 
                 ref={fileInputRef}

src/components/File.tsx

@@ -1,5 +1,9 @@
-import { component$ } from "@builder.io/qwik";
+import { $, component$ } from "@builder.io/qwik";
+import { useNanostore$ } from "~/hooks/nanostores";
+import { api } from "~/lib/api";
+import { DashboardFiles } from "~/lib/stores";
 import { StereoFile } from "~/lib/types";
+import { SolarTrashBin2Bold } from "./Icons";
 
 type FileProps = {
     file: StereoFile;
@@ -14,33 +18,53 @@ const getBase64Size = (b: string) => {
 const formatSize = (bytes: number) => {
     if (bytes < 1024) return `${bytes} B`;
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
 
 export default component$(({ file }: FileProps) => {
+    const files = useNanostore$<StereoFile[]>(DashboardFiles);
+
+    const deleteFile = $(async (id: string) => {
+        if (!confirm("Are you sure you want to delete this file?")) return;
+        console.log(await api.delete(id))
+        files.value = await api.list();
+    });
+    
     return (
+            <div class="rounded-xl bg-neutral-900 flex flex-col group overflow-hidden hover:bg-neutral-800 transition-all duration-200">
+                <div class="relative">
                     <a href={`/api/${file.ID}`} target="_blank">
-            <div class="rounded-xl bg-neutral-900 flex flex-col overflow-hidden">
                         { file.Base64 && (file.ID.endsWith(".png") || file.ID.endsWith(".jpg") || file.ID.endsWith(".jpeg")) && (
                             <img
                                 width={400}
                                 height={300}
                                 src={`data:image/png;base64,${file.Base64}`}
                                 alt={file.ID}
-                        class="w-full h-80 object-cover bg-gray-800 flex-grow"
+                                class="w-full h-60 object-cover bg-gray-800 flex-grow"
                             />
                         )}
+                    </a>
+
+                    <div class="absolute bottom-2 right-2 gap-2 z-10 group-hover:flex hidden duration-200 transition-all">
+                        <button
+                            class="duration-100 bg-red-600 hover:bg-white text-white hover:text-black p-2 rounded-lg"
+                            onClick$={async () => await deleteFile(file.ID)}
+                        >
+                            <SolarTrashBin2Bold class="w-6 h-6"/>
+                        </button>
+                    </div>
+                </div>
                 <div class="p-4 flex-grow-0 text-center">
                     <p class="text-lg font-semibold text-white w-full truncate">
-                        {file.ID.split("_").slice(1).join("_") || "Untitled"}
+                        { file.ID.split("_").slice(1).join("_") || "Untitled" }
                         </p>
                     <div class="flex gap-1 text-sm text-gray-400 items-center justify-center">
-                        <span>{formatSize(getBase64Size(file.Base64))}</span>
+                        <span>{ formatSize(getBase64Size(file.Base64)) }</span>
                         <span class="text-gray-600">•</span>
-                        <p>Uploaded on {new Date(file.CreatedAt).toLocaleDateString()}</p>
+                        <p>Uploaded on { new Date(file.CreatedAt).toLocaleDateString() }</p>
                     </div>
                 </div>
             </div>
-        </a>
     )
 })

src/components/Icons.tsx

@@ -5,3 +5,10 @@ export function SolarUploadLinear(props: QwikIntrinsicElements['svg'], key: stri
     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M17 9.002c2.175.012 3.353.109 4.121.877C22 10.758 22 12.172 22 15v1c0 2.829 0 4.243-.879 5.122C20.243 22 18.828 22 16 22H8c-2.828 0-4.243 0-5.121-.878C2 20.242 2 18.829 2 16v-1c0-2.828 0-4.242.879-5.121c.768-.768 1.946-.865 4.121-.877"></path><path stroke-linejoin="round" d="M12 15V2m0 0l3 3.5M12 2L9 5.5"></path></g></svg>
   )
 }
+
+
+export function SolarTrashBin2Bold(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props} key={key}><path fill="currentColor" d="M2.75 6.167c0-.46.345-.834.771-.834h2.665c.529-.015.996-.378 1.176-.916l.03-.095l.115-.372c.07-.228.131-.427.217-.605c.338-.702.964-1.189 1.687-1.314c.184-.031.377-.031.6-.031h3.478c.223 0 .417 0 .6.031c.723.125 1.35.612 1.687 1.314c.086.178.147.377.217.605l.115.372l.03.095c.18.538.74.902 1.27.916h2.57c.427 0 .772.373.772.834S20.405 7 19.979 7H3.52c-.426 0-.771-.373-.771-.833M11.607 22h.787c2.707 0 4.06 0 4.941-.863c.88-.864.97-2.28 1.15-5.111l.26-4.081c.098-1.537.147-2.305-.295-2.792s-1.187-.487-2.679-.487H8.23c-1.491 0-2.237 0-2.679.487s-.392 1.255-.295 2.792l.26 4.08c.18 2.833.27 4.248 1.15 5.112S8.9 22 11.607 22" /></svg>
+  )
+}

src/lib/api.ts

@@ -21,5 +21,11 @@ export const api = {
 				const formData = new FormData();
 				formData.append('file', file);
 				return await apiClient.post('upload', { body: formData });
-    }
+		},
+		delete: async (file_id: string) => {
+				console.log("Deleting file with ID:", file_id);
+				return await apiClient.delete(`delete`, {
+					json: { file_id }
+				}).json();
+		},
 }

src/routes/api/[path]/index.tsx

@@ -28,3 +28,4 @@ const proxy = async ({ send, url, pathname, request }: RequestEvent) => {
 
 export const onGet: RequestHandler = proxy;
 export const onPost: RequestHandler = proxy;
+export const onDelete: RequestHandler = proxy;