stereo.cat/frontend
2
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

file deleting

Browse source
This commit is contained in:
grngxd 2025-06-08 16:44:26 +01:00
parent 7d98b15780
commit 6089c569a1
5 changed files with 74 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Controlbar.tsx
View file

@ -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}

34
src/components/File.tsx
View file

@ -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,22 +18,43 @@ 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" }
@ -41,6 +66,5 @@ export default component$(({ file }: FileProps) => {
</div>
</div>
</div>
</a>
)
})

7
src/components/Icons.tsx
View file

@ -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>
)
}

8
src/lib/api.ts
View file

@ -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();
},
}

1
src/routes/api/[path]/index.tsx
View file

@ -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;