frontend/src/stores/upload.ts

@@ -96,6 +96,12 @@ export const useUploadStore = defineStore('upload', () => {
         return data;
     };
 
+    const deleteUpload = async (uploadId: string, deleteToken: string): Promise<void> => {
+        await api.delete(`/uploads/${uploadId}`, {
+            params: { delete_token: deleteToken }
+        });
+    };
+
     const getUploadRequestHeaders = (altcha?: string) => (altcha ? { [ALTCHA_REQUEST_HEADER]: altcha } : undefined);
 
     const uploadBatch = async (
@@ -257,6 +263,7 @@ export const useUploadStore = defineStore('upload', () => {
         clearAllUploads,
         uploadBatch,
         uploadZk,
-        uploadHotlink
+        uploadHotlink,
+        deleteUpload
     };
 });

frontend/src/types/delete/DeleteViewState.ts

@@ -0,0 +1 @@
+export type DeleteViewState = 'invalid' | 'deleting' | 'deleted' | 'notFound' | 'error';

frontend/src/views/DeleteView.vue

@@ -1,6 +1,59 @@
 <template>
-    <main class="flex min-h-screen flex-col p-8">
-        <h1 class="text-2xl font-semibold tracking-tight">Delete</h1>
-        <p class="mt-2 text-muted-foreground">Delete upload — coming soon.</p>
+    <main class="mx-auto flex min-h-screen max-w-lg flex-col items-center justify-center gap-3 p-8 text-center">
+        <p v-if="state === 'invalid'" class="text-sm text-muted-foreground">
+            This delete link is incomplete. Use the delete URL from your upload results.
+        </p>
+
+        <p v-else-if="state === 'deleting'" class="text-sm text-muted-foreground">Deleting image...</p>
+
+        <p v-else-if="state === 'deleted'" class="text-sm text-muted-foreground"> The image has been deleted. </p>
+
+        <p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground"> This image was not found. </p>
+
+        <p v-else-if="state === 'error'" class="text-sm text-destructive">
+            Could not delete this image. Try again later.
+        </p>
     </main>
 </template>
+
+<script setup lang="ts">
+import axios, { HttpStatusCode } from 'axios';
+import { onBeforeMount, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useUploadStore } from '@/stores/upload';
+import type { DeleteViewState } from '@/types/delete/DeleteViewState';
+
+const route = useRoute();
+const uploadStore = useUploadStore();
+
+const state = ref<DeleteViewState>('deleting');
+
+onBeforeMount(async () => {
+    const uploadId = route.params.id;
+    const deleteToken = route.query.token;
+
+    if (typeof uploadId !== 'string' || !uploadId || typeof deleteToken !== 'string' || !deleteToken) {
+        state.value = 'invalid';
+
+        return;
+    }
+
+    state.value = 'deleting';
+
+    try {
+        await uploadStore.deleteUpload(uploadId, deleteToken);
+
+        state.value = 'deleted';
+    } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === HttpStatusCode.NotFound) {
+            state.value = 'notFound';
+
+            return;
+        }
+
+        console.error('[delete] failed', { uploadId, error });
+
+        state.value = 'error';
+    }
+});
+</script>