From 26f3975c67f88d695ab5925507d0d50f129065cf Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Tue, 11 Mar 2025 17:51:46 +1100
Subject: [PATCH] feat: file uploads on news articles

---
 server/components/NewsArticleCreate.vue       | 139 ++++++++++++------
 server/components/NewsDirectory.vue           | 108 ++++++++------
 server/composables/news.ts                    |  35 ++---
 server/pages/news/[id]/index.vue              |  56 ++++---
 server/pages/news/index.vue                   |  29 ++--
 server/server/api/v1/admin/news/index.post.ts |  42 +++++-
 server/server/internal/news/index.ts          |   7 +-
 7 files changed, 257 insertions(+), 159 deletions(-)

diff --git a/server/components/NewsArticleCreate.vue b/server/components/NewsArticleCreate.vue
index 661a7ffa..058c82d1 100644
--- a/server/components/NewsArticleCreate.vue
+++ b/server/components/NewsArticleCreate.vue
@@ -3,21 +3,21 @@
     <!-- Create article button - only show for admin users -->
     <button
       v-if="user?.admin"
-      @click="isCreateExpanded = !isCreateExpanded"
+      @click="modalOpen = !modalOpen"
       class="inline-flex items-center gap-x-2 px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold font-display shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95"
     >
       <PlusIcon
         class="h-5 w-5 transition-transform duration-200"
-        :class="{ 'rotate-90': isCreateExpanded }"
+        :class="{ 'rotate-90': modalOpen }"
       />
       <span>New Article</span>
     </button>
 
-    <ModalTemplate size-class="sm:max-w-[80vw]" v-model="isCreateExpanded">
+    <ModalTemplate size-class="sm:max-w-[80vw]" v-model="modalOpen">
       <h3 class="text-lg font-semibold text-zinc-100 mb-4">
         Create New Article
       </h3>
-      <form @submit.prevent="createArticle" class="space-y-4">
+      <form @submit.prevent="() => createArticle()" class="space-y-4">
         <div>
           <label for="title" class="block text-sm font-medium text-zinc-400"
             >Title</label
@@ -34,7 +34,7 @@
 
         <div>
           <label for="excerpt" class="block text-sm font-medium text-zinc-400"
-            >Exercept</label
+            >Short description</label
           >
           <input
             id="excerpt"
@@ -63,7 +63,9 @@
               </button>
             </div>
 
-            <div class="grid grid-cols-2 gap-4 h-[400px]">
+            <div
+              class="grid grid-rows-2 sm:grid-cols-2 sm:grid-rows-1 gap-4 h-[400px]"
+            >
               <!-- Editor -->
               <div class="flex flex-col">
                 <span class="text-sm text-zinc-500 mb-2">Editor</span>
@@ -98,14 +100,31 @@
         </div>
 
         <div>
-          <label for="image" class="block text-sm font-medium text-zinc-400"
-            >Image URL (optional)</label
+          <label
+            for="file-upload"
+            class="group cursor-pointer transition relative block w-full rounded-lg border-2 border-dashed border-zinc-600 p-12 text-center hover:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
           >
+            <ArrowUpTrayIcon
+              class="transition mx-auto h-6 w-6 text-zinc-600 group-hover:text-zinc-700"
+              stroke="currentColor"
+              fill="none"
+              viewBox="0 0 48 48"
+              aria-hidden="true"
+            />
+            <span
+              class="transition mt-2 block text-sm font-semibold text-zinc-400 group-hover:text-zinc-500"
+              >Upload cover image</span
+            >
+            <p class="mt-1 text-xs text-zinc-400" v-if="currentFile">
+              {{ currentFile.name }}
+            </p>
+          </label>
           <input
-            id="image"
-            v-model="newArticle.image"
-            type="url"
-            class="mt-1 block w-full rounded-md bg-zinc-900 border-zinc-700 text-zinc-100 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+            accept="image/*"
+            @change="(e) => file = (e.target as any)?.files"
+            class="hidden"
+            type="file"
+            id="file-upload"
           />
         </div>
 
@@ -148,17 +167,30 @@
         </div>
 
         <button type="submit" class="hidden" />
+
+        <div v-if="error" class="mt-3 rounded-md bg-red-600/10 p-4">
+          <div class="flex">
+            <div class="flex-shrink-0">
+              <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+            </div>
+            <div class="ml-3">
+              <h3 class="text-sm font-medium text-red-600">
+                {{ error }}
+              </h3>
+            </div>
+          </div>
+        </div>
       </form>
       <template #buttons>
         <LoadingButton
-          :loading="isSubmitting"
+          :loading="loading"
           @click="() => createArticle()"
           class="bg-blue-600 text-white hover:bg-blue-500"
         >
           Submit
         </LoadingButton>
         <button
-          @click="() => (isCreateExpanded = !isCreateExpanded)"
+          @click="() => (modalOpen = !modalOpen)"
           class="inline-flex items-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold font-display text-white hover:bg-zinc-700"
         >
           Cancel
@@ -169,7 +201,12 @@
 </template>
 
 <script setup lang="ts">
-import { PlusIcon, XMarkIcon } from "@heroicons/vue/24/solid";
+import {
+  ArrowUpTrayIcon,
+  PlusIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from "@heroicons/vue/24/solid";
 import { micromark } from "micromark";
 
 const emit = defineEmits<{
@@ -178,18 +215,27 @@ const emit = defineEmits<{
 
 const user = useUser();
 const news = useNews();
-const isCreateExpanded = ref(false);
-const isSubmitting = ref(false);
+
+const modalOpen = ref(false);
+const loading = ref(false);
 const newTagInput = ref("");
 
 const newArticle = ref({
   title: "",
   description: "",
   content: "",
-  image: "",
   tags: [] as string[],
 });
 
+const markdownPreview = computed(() => {
+  return micromark(newArticle.value.content);
+});
+
+const file = ref<FileList | undefined>();
+const currentFile = computed(() => file.value?.item(0));
+
+const error = ref<string | undefined>();
+
 const contentEditor = ref<HTMLTextAreaElement>();
 
 const markdownShortcuts = [
@@ -201,7 +247,7 @@ const markdownShortcuts = [
   { label: "Heading", prefix: "## ", suffix: "", placeholder: "heading" },
 ];
 
-const handleContentKeydown = (e: KeyboardEvent) => {
+function handleContentKeydown(e: KeyboardEvent) {
   if (e.key === "Enter") {
     e.preventDefault();
 
@@ -242,23 +288,23 @@ const handleContentKeydown = (e: KeyboardEvent) => {
         start + insertion.length;
     });
   }
-};
+}
 
-const addTag = () => {
+function addTag() {
   const tag = newTagInput.value.trim();
   if (tag && !newArticle.value.tags.includes(tag)) {
     newArticle.value.tags.push(tag);
     newTagInput.value = ""; // Clear the input
   }
-};
+}
 
-const removeTag = (tagToRemove: string) => {
+function removeTag(tagToRemove: string) {
   newArticle.value.tags = newArticle.value.tags.filter(
     (tag) => tag !== tagToRemove
   );
-};
+}
 
-const applyMarkdown = (shortcut: (typeof markdownShortcuts)[0]) => {
+function applyMarkdown(shortcut: (typeof markdownShortcuts)[0]) {
   const textarea = contentEditor.value;
   if (!textarea) return;
 
@@ -284,19 +330,27 @@ const applyMarkdown = (shortcut: (typeof markdownShortcuts)[0]) => {
     const newEnd = newStart + replacement.length;
     textarea.setSelectionRange(newStart, newEnd);
   });
-};
+}
 
-const createArticle = async () => {
-  if (!user.value?.id) {
-    console.error("User not authenticated");
-    return;
-  }
+async function createArticle() {
+  if (!user.value) return;
 
-  isSubmitting.value = true;
+  loading.value = true;
   try {
-    await news.create({
-      ...newArticle.value,
-      authorId: user.value.id,
+    const formData = new FormData();
+
+    if (currentFile.value) {
+      formData.append("image", currentFile.value);
+    }
+
+    formData.append("title", newArticle.value.title);
+    formData.append("description", newArticle.value.description);
+    formData.append("content", newArticle.value.content);
+    formData.append("tags", JSON.stringify(newArticle.value.tags));
+
+    await $fetch("/api/v1/admin/news", {
+      method: "POST",
+      body: formData,
     });
 
     // Reset form
@@ -304,23 +358,18 @@ const createArticle = async () => {
       title: "",
       description: "",
       content: "",
-      image: "",
       tags: [],
     };
 
     emit("refresh");
 
-    isCreateExpanded.value = false;
-  } catch (error) {
-    console.error("Failed to create article:", error);
+    modalOpen.value = false;
+  } catch (e) {
+    error.value = (e as any)?.statusMessage ?? "An unknown error occured.";
   } finally {
-    isSubmitting.value = false;
+    loading.value = false;
   }
-};
-
-const markdownPreview = computed(() => {
-  return micromark(newArticle.value.content);
-});
+}
 </script>
 
 <style scoped>
diff --git a/server/components/NewsDirectory.vue b/server/components/NewsDirectory.vue
index c95ddca8..58a6c3d4 100644
--- a/server/components/NewsDirectory.vue
+++ b/server/components/NewsDirectory.vue
@@ -1,12 +1,19 @@
 <template>
-  <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-900 px-6 py-6 ring-1 ring-white/10">
+  <div
+    class="flex grow flex-col gap-y-5 overflow-y-auto bg-zinc-900 px-6 py-6 ring-1 ring-white/10"
+  >
     <!-- Search and filters -->
     <div class="space-y-6">
       <div>
         <label for="search" class="sr-only">Search articles</label>
         <div class="relative">
-          <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-            <MagnifyingGlassIcon class="h-5 w-5 text-zinc-400" aria-hidden="true" />
+          <div
+            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
+          >
+            <MagnifyingGlassIcon
+              class="h-5 w-5 text-zinc-400"
+              aria-hidden="true"
+            />
           </div>
           <input
             id="search"
@@ -19,7 +26,9 @@
       </div>
 
       <div class="pt-2">
-        <label for="date" class="block text-sm font-medium text-zinc-400 mb-2">Date</label>
+        <label for="date" class="block text-sm font-medium text-zinc-400 mb-2"
+          >Date</label
+        >
         <select
           id="date"
           v-model="dateFilter"
@@ -45,7 +54,7 @@
             :class="[
               selectedTags.includes(tag)
                 ? 'bg-blue-600 text-white'
-                : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
+                : 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700',
             ]"
           >
             {{ tag }}
@@ -61,35 +70,40 @@
         :to="`/news/${article.id}`"
         class="group block rounded-lg hover-lift"
       >
-        <div 
+        <div
           class="relative flex flex-col gap-y-2 rounded-lg p-3 transition-all duration-200"
           :class="[
-            route.params.id === article.id 
-              ? 'bg-zinc-800' 
-              : 'hover:bg-zinc-800/50'
+            route.params.id === article.id
+              ? 'bg-zinc-800'
+              : 'hover:bg-zinc-800/50',
           ]"
         >
-          <div 
+          <div
             v-if="article.image"
             class="absolute inset-0 rounded-lg transition-all duration-200 overflow-hidden"
           >
-            <img 
-              :src="article.image"
-              class="absolute inset-0 w-full h-full object-cover transition-all duration-200"
-              :class="[
-                'blur-sm group-hover:blur-none scale-105 group-hover:scale-100 duration-500'
-              ]"
-              alt=""
+            <img
+              :src="useObject(article.image)"
+              class="absolute blur-sm inset-0 w-full h-full object-cover transition-all duration-200 group-hover:scale-110"
             />
-            <div 
-              class="absolute inset-0 bg-gradient-to-b from-zinc-900/80 to-zinc-900/90 group-hover:from-zinc-900/40 group-hover:to-zinc-900/60 transition-all duration-200"
+            <div
+              class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-800 transition-all duration-200"
             />
           </div>
 
-          <h3 class="relative text-sm font-medium text-zinc-100">{{ article.title }}</h3>
-          <p class="relative mt-1 text-xs text-zinc-400 line-clamp-2" v-html="formatExcerpt(article.description)"></p>
-          <div class="relative mt-2 flex items-center gap-x-2 text-xs text-zinc-500">
-            <time :datetime="article.publishedAt">{{ formatDate(article.publishedAt) }}</time>
+          <h3 class="relative text-sm font-medium text-zinc-100">
+            {{ article.title }}
+          </h3>
+          <p
+            class="relative mt-1 text-xs text-zinc-400 line-clamp-2"
+            v-html="formatExcerpt(article.description)"
+          ></p>
+          <div
+            class="relative mt-2 flex items-center gap-x-2 text-xs text-zinc-500"
+          >
+            <time :datetime="article.publishedAt">{{
+              formatDate(article.publishedAt)
+            }}</time>
           </div>
         </div>
       </NuxtLink>
@@ -98,9 +112,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
-import { micromark } from 'micromark';
+import { ref, computed } from "vue";
+import { MagnifyingGlassIcon } from "@heroicons/vue/24/solid";
+import { micromark } from "micromark";
 
 const route = useRoute();
 const searchQuery = ref("");
@@ -114,8 +128,8 @@ defineExpose({ refresh: refreshArticles });
 const availableTags = computed(() => {
   if (!articles.value) return [];
   const tags = new Set<string>();
-  articles.value.forEach(article => {
-    article.tags.forEach(tag => tags.add(tag.name));
+  articles.value.forEach((article) => {
+    article.tags.forEach((tag) => tags.add(tag.name));
   });
   return Array.from(tags);
 });
@@ -141,42 +155,48 @@ const formatExcerpt = (excerpt: string) => {
   // Convert markdown to HTML
   const html = micromark(excerpt);
   // Strip HTML tags using regex
-  return html.replace(/<[^>]*>/g, '');
+  return html.replace(/<[^>]*>/g, "");
 };
 
 const filteredArticles = computed(() => {
   if (!articles.value) return [];
-  
+
   // filter articles based on search, date, and tags
   return articles.value.filter((article) => {
-    const matchesSearch = 
+    const matchesSearch =
       article.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      article.description.toLowerCase().includes(searchQuery.value.toLowerCase());
-    
+      article.description
+        .toLowerCase()
+        .includes(searchQuery.value.toLowerCase());
+
     const articleDate = new Date(article.publishedAt);
     const now = new Date();
     let matchesDate = true;
-    
+
     switch (dateFilter.value) {
-      case 'today':
+      case "today":
         matchesDate = articleDate.toDateString() === now.toDateString();
         break;
-      case 'week':
+      case "week":
         const weekAgo = new Date(now.setDate(now.getDate() - 7));
         matchesDate = articleDate >= weekAgo;
         break;
-      case 'month':
-        matchesDate = articleDate.getMonth() === now.getMonth() && 
-                     articleDate.getFullYear() === now.getFullYear();
+      case "month":
+        matchesDate =
+          articleDate.getMonth() === now.getMonth() &&
+          articleDate.getFullYear() === now.getFullYear();
         break;
-      case 'year':
+      case "year":
         matchesDate = articleDate.getFullYear() === now.getFullYear();
         break;
     }
-    
-    const matchesTags = selectedTags.value.length === 0 || 
-                       selectedTags.value.every(tag => article.tags.find((e) => e.name == tag));
-    
+
+    const matchesTags =
+      selectedTags.value.length === 0 ||
+      selectedTags.value.every((tag) =>
+        article.tags.find((e) => e.name == tag)
+      );
+
     return matchesSearch && matchesDate && matchesTags;
   });
 });
diff --git a/server/composables/news.ts b/server/composables/news.ts
index 993d44ca..6c6ac228 100644
--- a/server/composables/news.ts
+++ b/server/composables/news.ts
@@ -2,17 +2,17 @@ export const useNews = () => {
   const getAll = async (options?: {
     limit?: number;
     skip?: number;
-    orderBy?: 'asc' | 'desc';
+    orderBy?: "asc" | "desc";
     tags?: string[];
     search?: string;
   }) => {
     const query = new URLSearchParams();
-    
-    if (options?.limit) query.set('limit', options.limit.toString());
-    if (options?.skip) query.set('skip', options.skip.toString());
-    if (options?.orderBy) query.set('order', options.orderBy);
-    if (options?.tags?.length) query.set('tags', options.tags.join(','));
-    if (options?.search) query.set('search', options.search);
+
+    if (options?.limit) query.set("limit", options.limit.toString());
+    if (options?.skip) query.set("skip", options.skip.toString());
+    if (options?.orderBy) query.set("order", options.orderBy);
+    if (options?.tags?.length) query.set("tags", options.tags.join(","));
+    if (options?.search) query.set("search", options.search);
 
     return await useFetch(`/api/v1/news?${query.toString()}`);
   };
@@ -21,30 +21,15 @@ export const useNews = () => {
     return await useFetch(`/api/v1/news/${id}`);
   };
 
-  const create = async (article: {
-    title: string;
-    description: string;
-    content: string;
-    image?: string;
-    tags: string[];
-    authorId: string;
-  }) => {
-    return await $fetch('/api/v1/admin/news', {
-      method: 'POST',
-      body: article
-    });
-  };
-
   const remove = async (id: string) => {
     return await $fetch(`/api/v1/admin/news/${id}`, {
-      method: 'DELETE'
+      method: "DELETE",
     });
   };
 
   return {
     getAll,
     getById,
-    create,
-    remove
+    remove,
   };
-}; 
+};
diff --git a/server/pages/news/[id]/index.vue b/server/pages/news/[id]/index.vue
index 8b6169f3..0f52c4a2 100644
--- a/server/pages/news/[id]/index.vue
+++ b/server/pages/news/[id]/index.vue
@@ -2,19 +2,21 @@
   <div v-if="article" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <!-- Banner header with blurred background -->
     <div class="relative w-full h-[300px] mb-8 rounded-lg overflow-hidden">
-      <div class="absolute inset-0">
-        <template v-if="article.image">
-          <img
-            :src="article.image"
-            alt=""
-            class="w-full h-full object-cover blur-sm scale-110"
-          />
-          <div class="absolute inset-0 bg-gradient-to-b from-zinc-950/70 via-zinc-950/60 to-zinc-950/90"></div>
-        </template>
-        <template v-else>
-          <!-- Fallback gradient background when no image -->
-          <div class="absolute inset-0 bg-gradient-to-b from-zinc-800 to-zinc-900"></div>
-        </template>
+      <div class="absolute inset-0" v-if="article.image">
+        <img
+          :src="useObject(article.image)"
+          alt=""
+          class="w-full h-full object-cover blur-sm scale-110"
+        />
+        <div
+          class="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950"
+        />
+      </div>
+      <div v-else>
+        <!-- Fallback gradient background when no image -->
+        <div
+          class="absolute inset-0 bg-gradient-to-b from-zinc-800 to-zinc-900"
+        ></div>
       </div>
 
       <div class="relative h-full flex flex-col justify-end p-8">
@@ -26,10 +28,10 @@
             <ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
             Back to News
           </NuxtLink>
-          
+
           <button
             v-if="user?.admin"
-            @click="() => currentlyDeleting = article"
+            @click="() => (currentlyDeleting = article)"
             class="px-2 py-1 rounded bg-red-900/50 backdrop-blur-sm transition text-sm/6 font-semibold text-red-400 hover:text-red-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
           >
             <TrashIcon class="h-4 w-4" aria-hidden="true" />
@@ -38,11 +40,19 @@
         </div>
 
         <div class="max-w-[calc(100%-2rem)]">
-          <h1 class="text-4xl font-bold text-white mb-3">{{ article.title }}</h1>
-          <div class="flex flex-col gap-y-3 sm:flex-row sm:items-center sm:gap-x-4 text-zinc-300">
+          <h1 class="text-4xl font-bold text-white mb-3">
+            {{ article.title }}
+          </h1>
+          <div
+            class="flex flex-col gap-y-3 sm:flex-row sm:items-center sm:gap-x-4 text-zinc-300"
+          >
             <div class="flex items-center gap-x-4">
-              <time :datetime="article.publishedAt">{{ formatDate(article.publishedAt) }}</time>
-              <span class="text-blue-400">{{ article.author?.displayName ?? "System" }}</span>
+              <time :datetime="article.publishedAt">{{
+                formatDate(article.publishedAt)
+              }}</time>
+              <span class="text-blue-400">{{
+                article.author?.displayName ?? "System"
+              }}</span>
             </div>
             <div class="flex flex-wrap gap-2">
               <span
@@ -60,8 +70,8 @@
     </div>
 
     <!-- Article content - markdown -->
-    <div 
-      class="max-w-[calc(100%-2rem)] mx-auto prose prose-invert prose-lg"
+    <div
+      class="mx-auto prose prose-invert prose-lg"
       v-html="renderedContent"
     />
   </div>
@@ -72,7 +82,7 @@
 <script setup lang="ts">
 import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
 import { TrashIcon } from "@heroicons/vue/24/outline";
-import { micromark } from 'micromark';
+import { micromark } from "micromark";
 
 const route = useRoute();
 const { data: article } = await useNews().getById(route.params.id as string);
@@ -82,7 +92,7 @@ const user = useUser();
 if (!article.value) {
   throw createError({
     statusCode: 404,
-    message: 'Article not found'
+    message: "Article not found",
   });
 }
 
diff --git a/server/pages/news/index.vue b/server/pages/news/index.vue
index da4f6df9..99cb4c1e 100644
--- a/server/pages/news/index.vue
+++ b/server/pages/news/index.vue
@@ -10,17 +10,13 @@
             Stay up to date with the latest updates and announcements.
           </p>
         </div>
-        
+
         <NewsArticleCreate @refresh="refreshAll" />
       </div>
     </div>
 
     <!-- Articles list -->
-    <TransitionGroup
-      name="article-list"
-      tag="div"
-      class="space-y-6"
-    >
+    <TransitionGroup name="article-list" tag="div" class="space-y-6">
       <NuxtLink
         v-for="article in articles"
         :key="article.id"
@@ -32,7 +28,8 @@
         >
           <div class="relative h-48 w-full overflow-hidden">
             <img
-              :src="article.image || '/images/default-news-image.jpg'"
+              v-if="article.image"
+              :src="useObject(article.image)"
               alt=""
               class="h-full w-full object-cover object-center transition-all duration-500 group-hover:scale-110 scale-105"
             />
@@ -50,13 +47,20 @@
           <div class="flex flex-1 flex-col justify-between p-6">
             <div class="flex-1">
               <div class="flex items-center gap-x-2">
-                <time :datetime="article.publishedAt" class="text-sm text-zinc-400">
+                <time
+                  :datetime="article.publishedAt"
+                  class="text-sm text-zinc-400"
+                >
                   {{ formatDate(article.publishedAt) }}
                 </time>
-                <span class="text-sm text-blue-400">{{ article.author?.displayName ?? "System" }}</span>
+                <span class="text-sm text-blue-400">{{
+                  article.author?.displayName ?? "System"
+                }}</span>
               </div>
               <div class="mt-2">
-                <h3 class="text-xl font-semibold text-zinc-100 group-hover:text-primary-400">
+                <h3
+                  class="text-xl font-semibold text-zinc-100 group-hover:text-primary-400"
+                >
                   {{ article.title }}
                 </h3>
                 <p class="mt-3 text-base text-zinc-400">
@@ -69,10 +73,7 @@
       </NuxtLink>
     </TransitionGroup>
 
-    <div
-      v-if="articles?.length === 0"
-      class="text-center py-12"
-    >
+    <div v-if="articles?.length === 0" class="text-center py-12">
       <DocumentIcon class="mx-auto h-12 w-12 text-zinc-400" />
       <h3 class="mt-2 text-sm font-semibold text-zinc-100">No articles</h3>
       <p class="mt-1 text-sm text-zinc-500">Check back later for updates.</p>
diff --git a/server/server/api/v1/admin/news/index.post.ts b/server/server/api/v1/admin/news/index.post.ts
index 16afed14..2e6b6405 100644
--- a/server/server/api/v1/admin/news/index.post.ts
+++ b/server/server/api/v1/admin/news/index.post.ts
@@ -1,23 +1,51 @@
 import { defineEventHandler, createError, readBody } from "h3";
 import aclManager from "~/server/internal/acls";
 import newsManager from "~/server/internal/news";
+import { handleFileUpload } from "~/server/internal/utils/handlefileupload";
 
 export default defineEventHandler(async (h3) => {
   const allowed = await aclManager.allowSystemACL(h3, ["news:create"]);
   if (!allowed) throw createError({ statusCode: 403 });
 
-  const body = await readBody(h3);
+  const form = await readMultipartFormData(h3);
+  if (!form)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "This endpoint requires multipart form data.",
+    });
+
+  const uploadResult = await handleFileUpload(h3, {}, ["internal:read"]);
+  if (!uploadResult)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Failed to upload file",
+    });
+
+  const [imageId, options, pull, dump] = uploadResult;
+
+  const title = options.title;
+  const description = options.description;
+  const content = options.content;
+  const tags = options.tags ? (JSON.parse(options.tags) as string[]) : [];
+
+  if (!title || !description || !content)
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Missing or invalid title, description or content.",
+    });
 
   const article = await newsManager.create({
-    title: body.title,
-    description: body.description,
-    content: body.content,
+    title: title,
+    description: description,
+    content: content,
 
-    tags: body.tags,
+    tags: tags,
 
-    image: body.image,
-    authorId: body.authorId,
+    image: imageId,
+    authorId: "system",
   });
 
+  await pull();
+
   return article;
 });
diff --git a/server/server/internal/news/index.ts b/server/server/internal/news/index.ts
index 9e8d35dd..b6c0af1f 100644
--- a/server/server/internal/news/index.ts
+++ b/server/server/internal/news/index.ts
@@ -1,5 +1,6 @@
 import { triggerAsyncId } from "async_hooks";
 import prisma from "../db/database";
+import objectHandler from "../objects";
 
 class NewsManager {
   async create(data: {
@@ -115,9 +116,13 @@ class NewsManager {
   }
 
   async delete(id: string) {
-    return await prisma.article.delete({
+    const article = await prisma.article.delete({
       where: { id },
     });
+    if (article.image) {
+      return await objectHandler.delete(article.image);
+    }
+    return true;
   }
 }