From 0437503b752e43aa34a25daa0ff9903a59e1602f Mon Sep 17 00:00:00 2001
From: he3als <65787561+he3als@users.noreply.github.com>
Date: Sun, 29 Dec 2024 00:31:52 +0000
Subject: [PATCH] feat(servers content): file upload + extra mod info + misc
 (#3055)

* feat: only scroll up if scrolled down

* feat: no query results message

* feat: content files support, mobile fixes

* fix(drag & drop): type of file prop

* chore: show number of mods in searchbar

Signed-off-by: Evan Song <theevansong@gmail.com>

* chore: adjust btn styles

Signed-off-by: Evan Song <theevansong@gmail.com>

* feat: prepare for mod author in backend response

Signed-off-by: Evan Song <theevansong@gmail.com>

* fix: external mods & mobile

* chore: adjust edit mod version modal copy

Signed-off-by: Evan Song <theevansong@gmail.com>

* chore: add tooltips for version/filename

Signed-off-by: Evan Song <theevansong@gmail.com>

* chore: swap delete/change version btn

Signed-off-by: Evan Song <theevansong@gmail.com>

* fix: dont allow mod link to be dragged

Signed-off-by: Evan Song <theevansong@gmail.com>

* fix: oops

Signed-off-by: Evan Song <theevansong@gmail.com>

* chore: remove author field

Signed-off-by: Evan Song <theevansong@gmail.com>

* chore: drill down tooltip

Signed-off-by: Evan Song <theevansong@gmail.com>

* fix: fighting types

Signed-off-by: Evan Song <theevansong@gmail.com>

* prepare for owner field

Signed-off-by: Evan Song <theevansong@gmail.com>

---------

Signed-off-by: Evan Song <theevansong@gmail.com>
Co-authored-by: Evan Song <theevansong@gmail.com>
Co-authored-by: Evan Song <52982404+ferothefox@users.noreply.github.com>
---
 .../ui/servers/FilesUploadDragAndDrop.vue     |  75 +++
 .../ui/servers/FilesUploadDropdown.vue        | 306 ++++++++++++
 apps/frontend/src/composables/pyroServers.ts  |  16 +-
 .../servers/manage/[id]/content/index.vue     | 441 +++++++++++-------
 .../src/pages/servers/manage/[id]/files.vue   | 291 +-----------
 .../servers/manage/[id]/options/loader.vue    |   4 +-
 apps/frontend/src/types/servers.ts            |  16 +-
 7 files changed, 694 insertions(+), 455 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
 create mode 100644 apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue

diff --git a/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue b/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
new file mode 100644
index 000000000..68fd5c92e
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDragAndDrop.vue
@@ -0,0 +1,75 @@
+<template>
+  <div
+    @dragenter.prevent="handleDragEnter"
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
+    @drop.prevent="handleDrop"
+  >
+    <slot />
+    <div
+      v-if="isDragging"
+      :class="[
+        'absolute inset-0 flex items-center justify-center rounded-2xl bg-black bg-opacity-50 text-white',
+        overlayClass,
+      ]"
+    >
+      <div class="text-center">
+        <UploadIcon class="mx-auto h-16 w-16" />
+        <p class="mt-2 text-xl">
+          Drop {{ type ? type.toLocaleLowerCase() : "file" }}s here to upload
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UploadIcon } from "@modrinth/assets";
+import { ref } from "vue";
+
+const emit = defineEmits<{
+  (event: "filesDropped", files: File[]): void;
+}>();
+
+defineProps<{
+  overlayClass?: string;
+  type?: string;
+}>();
+
+const isDragging = ref(false);
+const dragCounter = ref(0);
+
+const handleDragEnter = (event: DragEvent) => {
+  event.preventDefault();
+  if (!event.dataTransfer?.types.includes("application/pyro-file-move")) {
+    dragCounter.value++;
+    isDragging.value = true;
+  }
+};
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault();
+  dragCounter.value--;
+  if (dragCounter.value === 0) {
+    isDragging.value = false;
+  }
+};
+
+const handleDrop = (event: DragEvent) => {
+  event.preventDefault();
+  isDragging.value = false;
+  dragCounter.value = 0;
+
+  const isInternalMove = event.dataTransfer?.types.includes("application/pyro-file-move");
+  if (isInternalMove) return;
+
+  const files = event.dataTransfer?.files;
+  if (files) {
+    emit("filesDropped", Array.from(files));
+  }
+};
+</script>
diff --git a/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
new file mode 100644
index 000000000..4841ea53c
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/FilesUploadDropdown.vue
@@ -0,0 +1,306 @@
+<template>
+  <Transition name="upload-status" @enter="onUploadStatusEnter" @leave="onUploadStatusLeave">
+    <div v-show="isUploading" ref="uploadStatusRef" class="upload-status">
+      <div
+        ref="statusContentRef"
+        :class="['flex flex-col p-4 text-sm text-contrast', $attrs.class]"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2 font-bold">
+            <FolderOpenIcon class="size-4" />
+            <span>
+              <span class="capitalize">
+                {{ props.fileType ? props.fileType : "File" }} Uploads
+              </span>
+              <span>{{ activeUploads.length > 0 ? ` - ${activeUploads.length} left` : "" }}</span>
+            </span>
+          </div>
+        </div>
+
+        <div class="mt-2 space-y-2">
+          <div
+            v-for="item in uploadQueue"
+            :key="item.file.name"
+            class="flex h-6 items-center justify-between gap-2 text-xs"
+          >
+            <div class="flex flex-1 items-center gap-2 truncate">
+              <transition-group name="status-icon" mode="out-in">
+                <UiServersPanelSpinner
+                  v-show="item.status === 'uploading'"
+                  key="spinner"
+                  class="absolute !size-4"
+                />
+                <CheckCircleIcon
+                  v-show="item.status === 'completed'"
+                  key="check"
+                  class="absolute size-4 text-green"
+                />
+                <XCircleIcon
+                  v-show="
+                    item.status === 'error' ||
+                    item.status === 'cancelled' ||
+                    item.status === 'incorrect-type'
+                  "
+                  key="error"
+                  class="absolute size-4 text-red"
+                />
+              </transition-group>
+              <span class="ml-6 truncate">{{ item.file.name }}</span>
+              <span class="text-secondary">{{ item.size }}</span>
+            </div>
+            <div class="flex min-w-[80px] items-center justify-end gap-2">
+              <template v-if="item.status === 'completed'">
+                <span>Done</span>
+              </template>
+              <template v-else-if="item.status === 'error'">
+                <span class="text-red">Failed - File already exists</span>
+              </template>
+              <template v-else-if="item.status === 'incorrect-type'">
+                <span class="text-red">Failed - Incorrect file type</span>
+              </template>
+              <template v-else>
+                <template v-if="item.status === 'uploading'">
+                  <span>{{ item.progress }}%</span>
+                  <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
+                    <div
+                      class="h-full bg-contrast transition-all duration-200"
+                      :style="{ width: item.progress + '%' }"
+                    />
+                  </div>
+                  <ButtonStyled color="red" type="transparent" @click="cancelUpload(item)">
+                    <button>Cancel</button>
+                  </ButtonStyled>
+                </template>
+                <template v-else-if="item.status === 'cancelled'">
+                  <span class="text-red">Cancelled</span>
+                </template>
+                <template v-else>
+                  <span>{{ item.progress }}%</span>
+                  <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
+                    <div
+                      class="h-full bg-contrast transition-all duration-200"
+                      :style="{ width: item.progress + '%' }"
+                    />
+                  </div>
+                </template>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { FolderOpenIcon, CheckCircleIcon, XCircleIcon } from "@modrinth/assets";
+import { ButtonStyled } from "@modrinth/ui";
+import { ref, computed, watch, nextTick } from "vue";
+
+interface UploadItem {
+  file: File;
+  progress: number;
+  status: "pending" | "uploading" | "completed" | "error" | "cancelled" | "incorrect-type";
+  size: string;
+  uploader?: any;
+}
+
+interface Props {
+  currentPath: string;
+  fileType?: string;
+  marginBottom?: number;
+  acceptedTypes?: Array<string>;
+  fs: FSModule;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  (e: "uploadComplete"): void;
+}>();
+
+const uploadStatusRef = ref<HTMLElement | null>(null);
+const statusContentRef = ref<HTMLElement | null>(null);
+const uploadQueue = ref<UploadItem[]>([]);
+
+const isUploading = computed(() => uploadQueue.value.length > 0);
+const activeUploads = computed(() =>
+  uploadQueue.value.filter((item) => item.status === "pending" || item.status === "uploading"),
+);
+
+const onUploadStatusEnter = (el: Element) => {
+  const height = (el as HTMLElement).scrollHeight + (props.marginBottom || 0);
+  (el as HTMLElement).style.height = "0";
+  // eslint-disable-next-line no-void
+  void (el as HTMLElement).offsetHeight;
+  (el as HTMLElement).style.height = `${height}px`;
+};
+
+const onUploadStatusLeave = (el: Element) => {
+  const height = (el as HTMLElement).scrollHeight + (props.marginBottom || 0);
+  (el as HTMLElement).style.height = `${height}px`;
+  // eslint-disable-next-line no-void
+  void (el as HTMLElement).offsetHeight;
+  (el as HTMLElement).style.height = "0";
+};
+
+watch(
+  uploadQueue,
+  () => {
+    if (!uploadStatusRef.value) return;
+    const el = uploadStatusRef.value;
+    const itemsHeight = uploadQueue.value.length * 32;
+    const headerHeight = 12;
+    const gap = 8;
+    const padding = 32;
+    const totalHeight = padding + headerHeight + gap + itemsHeight + (props.marginBottom || 0);
+    el.style.height = `${totalHeight}px`;
+  },
+  { deep: true },
+);
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + " KB";
+  if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + " MB";
+  return (bytes / 1024 ** 3).toFixed(1) + " GB";
+};
+
+const cancelUpload = (item: UploadItem) => {
+  if (item.uploader && item.status === "uploading") {
+    item.uploader.cancel();
+    item.status = "cancelled";
+
+    setTimeout(async () => {
+      const index = uploadQueue.value.findIndex((qItem) => qItem.file.name === item.file.name);
+      if (index !== -1) {
+        uploadQueue.value.splice(index, 1);
+        await nextTick();
+      }
+    }, 5000);
+  }
+};
+
+const badFileTypeMsg = "Upload had incorrect file type";
+const uploadFile = async (file: File) => {
+  const uploadItem: UploadItem = {
+    file,
+    progress: 0,
+    status: "pending",
+    size: formatFileSize(file.size),
+  };
+
+  uploadQueue.value.push(uploadItem);
+
+  try {
+    if (
+      props.acceptedTypes &&
+      !props.acceptedTypes.includes(file.type) &&
+      !props.acceptedTypes.some((type) => file.name.endsWith(type))
+    ) {
+      throw new Error(badFileTypeMsg);
+    }
+
+    uploadItem.status = "uploading";
+    const filePath = `${props.currentPath}/${file.name}`.replace("//", "/");
+    const uploader = await props.fs.uploadFile(filePath, file);
+    uploadItem.uploader = uploader;
+
+    if (uploader?.onProgress) {
+      uploader.onProgress(({ progress }: { progress: number }) => {
+        const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+        if (index !== -1) {
+          uploadQueue.value[index].progress = Math.round(progress);
+        }
+      });
+    }
+
+    await uploader?.promise;
+    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+    if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
+      uploadQueue.value[index].status = "completed";
+      uploadQueue.value[index].progress = 100;
+    }
+
+    await nextTick();
+
+    setTimeout(async () => {
+      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+      if (removeIndex !== -1) {
+        uploadQueue.value.splice(removeIndex, 1);
+        await nextTick();
+      }
+    }, 5000);
+
+    emit("uploadComplete");
+  } catch (error) {
+    console.error("Error uploading file:", error);
+    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+    if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
+      uploadQueue.value[index].status =
+        error instanceof Error && error.message === badFileTypeMsg ? "incorrect-type" : "error";
+    }
+
+    setTimeout(async () => {
+      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name);
+      if (removeIndex !== -1) {
+        uploadQueue.value.splice(removeIndex, 1);
+        await nextTick();
+      }
+    }, 5000);
+
+    if (error instanceof Error && error.message !== "Upload cancelled") {
+      addNotification({
+        group: "files",
+        title: "Upload failed",
+        text: `Failed to upload ${file.name}`,
+        type: "error",
+      });
+    }
+  }
+};
+
+defineExpose({
+  uploadFile,
+  cancelUpload,
+});
+</script>
+
+<style scoped>
+.upload-status {
+  overflow: hidden;
+  transition: height 0.2s ease;
+}
+
+.upload-status-enter-active,
+.upload-status-leave-active {
+  transition: height 0.2s ease;
+  overflow: hidden;
+}
+
+.upload-status-enter-from,
+.upload-status-leave-to {
+  height: 0 !important;
+}
+
+.status-icon-enter-active,
+.status-icon-leave-active {
+  transition: all 0.25s ease;
+}
+
+.status-icon-enter-from,
+.status-icon-leave-to {
+  transform: scale(0);
+  opacity: 0;
+}
+
+.status-icon-enter-to,
+.status-icon-leave-from {
+  transform: scale(1);
+  opacity: 1;
+}
+</style>
diff --git a/apps/frontend/src/composables/pyroServers.ts b/apps/frontend/src/composables/pyroServers.ts
index 95ca9d5b1..943ccb0b2 100644
--- a/apps/frontend/src/composables/pyroServers.ts
+++ b/apps/frontend/src/composables/pyroServers.ts
@@ -198,14 +198,16 @@ interface Startup {
   jdk_build: "corretto" | "temurin" | "graal";
 }
 
-interface Mod {
+export interface Mod {
   filename: string;
-  project_id: string;
-  version_id: string;
-  name: string;
-  version_number: string;
-  icon_url: string;
+  project_id: string | undefined;
+  version_id: string | undefined;
+  name: string | undefined;
+  version_number: string | undefined;
+  icon_url: string | undefined;
+  owner: string | undefined;
   disabled: boolean;
+  installing: boolean;
 }
 
 interface Backup {
@@ -1364,7 +1366,7 @@ type ContentModule = { data: Mod[] } & ContentFunctions;
 type BackupsModule = { data: Backup[] } & BackupFunctions;
 type NetworkModule = { allocations: Allocation[] } & NetworkFunctions;
 type StartupModule = Startup & StartupFunctions;
-type FSModule = { auth: JWTAuth } & FSFunctions;
+export type FSModule = { auth: JWTAuth } & FSFunctions;
 
 type ModulesMap = {
   general: GeneralModule;
diff --git a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
index d2f24957b..8161fa97c 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/content/index.vue
@@ -15,12 +15,11 @@
           </div>
         </div>
         <div>
-          <div v-if="props.server.general?.upstream" class="flex items-center gap-2">
+          <div v-if="props.server.general?.upstream" class="flex gap-2">
             <InfoIcon class="hidden sm:block" />
             <span class="text-sm text-secondary">
-              Your server was created from a modpack. Changing the mod version may cause unexpected
-              issues. You can update the modpack version in your server's Options > Platform
-              settings.
+              Changing the mod version may cause unexpected issues. Because your server was created
+              from a modpack, it is recommended to use the modpack's version of the mod.
             </span>
           </div>
         </div>
@@ -57,9 +56,9 @@
   <div v-if="server.general && localMods" class="relative isolate flex h-full w-full flex-col">
     <div ref="pyroContentSentinel" class="sentinel" data-pyro-content-sentinel />
     <div class="relative flex h-full w-full flex-col">
-      <div class="sticky top-0 z-20 -mt-4 flex items-center justify-between bg-bg py-4">
-        <div class="flex w-full flex-col items-center gap-2 sm:flex-row sm:gap-4">
-          <div class="flex w-full items-center gap-2 sm:gap-4">
+      <div class="sticky top-0 z-20 -mt-3 flex items-center justify-between bg-bg py-3">
+        <div class="flex w-full flex-col-reverse items-center gap-2 sm:flex-row">
+          <div class="flex w-full items-center gap-2">
             <div class="relative flex-1 text-sm">
               <label class="sr-only" for="search">Search</label>
               <SearchIcon
@@ -73,7 +72,7 @@
                 type="search"
                 name="search"
                 autocomplete="off"
-                :placeholder="`Search ${type.toLocaleLowerCase()}s...`"
+                :placeholder="`Search ${localMods.length} ${type.toLocaleLowerCase()}s...`"
                 @input="debouncedSearch"
               />
             </div>
@@ -88,7 +87,7 @@
                   { id: 'disabled', action: () => (filterMethod = 'disabled') },
                 ]"
               >
-                <span class="whitespace-pre text-sm font-medium">
+                <span class="hidden whitespace-pre sm:block">
                   {{ filterMethodLabel }}
                 </span>
                 <FilterIcon aria-hidden="true" />
@@ -99,45 +98,71 @@
               </UiServersTeleportOverflowMenu>
             </ButtonStyled>
           </div>
-          <ButtonStyled v-if="hasMods" color="brand" type="outlined">
-            <nuxt-link
-              class="w-full text-nowrap sm:w-fit"
-              :to="`/${type.toLocaleLowerCase()}s?sid=${props.server.serverId}`"
-            >
-              <PlusIcon />
-              Add {{ type.toLocaleLowerCase() }}
-            </nuxt-link>
-          </ButtonStyled>
+          <div v-if="hasMods" class="flex w-full items-center gap-2 sm:w-fit">
+            <ButtonStyled>
+              <button class="w-full text-nowrap sm:w-fit" @click="initiateFileUpload">
+                <FileIcon />
+                Add file
+              </button>
+            </ButtonStyled>
+            <ButtonStyled color="brand">
+              <nuxt-link
+                class="w-full text-nowrap sm:w-fit"
+                :to="`/${type.toLocaleLowerCase()}s?sid=${props.server.serverId}`"
+              >
+                <PlusIcon />
+                Add {{ type.toLocaleLowerCase() }}
+              </nuxt-link>
+            </ButtonStyled>
+          </div>
         </div>
       </div>
-      <div v-if="hasMods" class="flex flex-col gap-2 transition-all">
-        <div ref="listContainer" class="relative w-full">
-          <div :style="{ position: 'relative', height: `${totalHeight}px` }">
-            <div :style="{ position: 'absolute', top: `${visibleTop}px`, width: '100%' }">
-              <template v-for="mod in visibleItems.items" :key="mod.filename">
-                <div
-                  class="relative mb-2 flex w-full items-center justify-between rounded-xl bg-bg-raised"
-                  :class="mod.disabled ? 'bg-table-alternateRow text-secondary' : ''"
-                  style="height: 64px"
-                >
-                  <NuxtLink
-                    :to="
-                      mod.project_id
-                        ? `/project/${mod.project_id}/version/${mod.version_id}`
-                        : `files?path=mods`
-                    "
-                    class="group flex min-w-0 items-center rounded-xl p-2"
+      <FilesUploadDropdown
+        v-if="props.server.fs"
+        ref="uploadDropdownRef"
+        class="rounded-xl bg-bg-raised"
+        :margin-bottom="16"
+        :file-type="type"
+        :current-path="'/mods'"
+        :fs="props.server.fs"
+        :accepted-types="acceptFileFromProjectType(type.toLocaleLowerCase()).split(',')"
+        @upload-complete="() => props.server.refresh(['content'])"
+      />
+      <FilesUploadDragAndDrop
+        v-if="server.general && localMods"
+        class="relative min-h-[50vh]"
+        overlay-class="rounded-xl border-2 border-dashed border-secondary"
+        :type="type"
+        @files-dropped="handleDroppedFiles"
+      >
+        <div v-if="hasFilteredMods" class="flex flex-col gap-2 transition-all">
+          <div ref="listContainer" class="relative w-full">
+            <div :style="{ position: 'relative', height: `${totalHeight}px` }">
+              <div :style="{ position: 'absolute', top: `${visibleTop}px`, width: '100%' }">
+                <template v-for="mod in visibleItems.items" :key="mod.filename">
+                  <div
+                    class="relative mb-2 flex w-full items-center justify-between rounded-xl bg-bg-raised"
+                    :class="mod.disabled ? 'bg-table-alternateRow text-secondary' : ''"
+                    style="height: 64px"
                   >
-                    <div class="flex min-w-0 items-center gap-2">
+                    <NuxtLink
+                      :to="
+                        mod.project_id
+                          ? `/project/${mod.project_id}/version/${mod.version_id}`
+                          : `files?path=mods`
+                      "
+                      class="flex min-w-0 flex-1 items-center gap-2 rounded-xl p-2"
+                      draggable="false"
+                    >
                       <UiAvatar
                         :src="mod.icon_url"
                         size="sm"
                         alt="Server Icon"
-                        :class="mod.disabled ? 'grayscale' : ''"
+                        :class="mod.disabled ? 'opacity-75 grayscale' : ''"
                       />
-                      <div class="flex min-w-0 flex-col">
-                        <span class="flex min-w-0 items-center gap-2 text-lg font-bold">
-                          <span class="truncate">{{
+                      <div class="flex min-w-0 flex-col gap-1">
+                        <span class="text-md flex min-w-0 items-center gap-2 font-bold">
+                          <span class="truncate text-contrast">{{
                             mod.name || mod.filename.replace(".disabled", "")
                           }}</span>
                           <span
@@ -146,132 +171,180 @@
                             >Disabled</span
                           >
                         </span>
-                        <span class="min-w-0 text-xs text-secondary">{{
+                        <div class="min-w-0 text-xs text-secondary">
+                          <span v-if="mod.owner" class="hidden sm:block"> by {{ mod.owner }} </span>
+                          <span class="block font-semibold sm:hidden">
+                            {{ mod.version_number || "External mod" }}
+                          </span>
+                        </div>
+                      </div>
+                    </NuxtLink>
+                    <div class="ml-2 hidden min-w-0 flex-1 flex-col text-sm sm:flex">
+                      <div class="truncate font-semibold text-contrast">
+                        <span v-tooltip="'Mod version'">{{
                           mod.version_number || "External mod"
                         }}</span>
                       </div>
+                      <div class="truncate">
+                        <span v-tooltip="'Mod file name'">{{ mod.filename }}</span>
+                      </div>
                     </div>
-                  </NuxtLink>
-                  <div class="flex items-center gap-2 pr-4 font-semibold text-contrast">
-                    <ButtonStyled v-if="mod.project_id" type="transparent">
-                      <button
-                        v-tooltip="'Edit mod version'"
-                        :disabled="mod.changing"
-                        class="!hidden sm:!block"
-                        @click="beginChangeModVersion(mod)"
-                      >
-                        <template v-if="mod.changing">
-                          <UiServersIconsLoadingIcon />
-                        </template>
-                        <template v-else>
-                          <EditIcon />
-                        </template>
-                      </button>
-                    </ButtonStyled>
-                    <ButtonStyled type="transparent">
-                      <button
-                        v-tooltip="'Delete mod'"
-                        :disabled="mod.changing"
-                        class="!hidden sm:!block"
-                        @click="removeMod(mod)"
-                      >
-                        <TrashIcon />
-                      </button>
-                    </ButtonStyled>
-
-                    <!-- Dropdown for mobile -->
-                    <div class="mr-2 flex items-center sm:hidden">
-                      <UiServersIconsLoadingIcon
-                        v-if="mod.changing"
-                        class="mr-2 h-5 w-5 animate-spin"
-                        style="color: var(--color-base)"
-                      />
-                      <ButtonStyled v-else circular type="transparent">
-                        <UiServersTeleportOverflowMenu
-                          :options="[
-                            {
-                              id: 'edit',
-                              action: () => beginChangeModVersion(mod),
-                              shown: !!(mod.project_id && !mod.changing),
-                            },
-                            {
-                              id: 'delete',
-                              action: () => removeMod(mod),
-                            },
-                          ]"
+                    <div
+                      class="flex items-center justify-end gap-2 pr-4 font-semibold text-contrast sm:min-w-44"
+                    >
+                      <ButtonStyled color="red" type="transparent">
+                        <button
+                          v-tooltip="'Delete mod'"
+                          :disabled="mod.changing"
+                          class="!hidden sm:!block"
+                          @click="removeMod(mod)"
+                        >
+                          <TrashIcon />
+                        </button>
+                      </ButtonStyled>
+                      <ButtonStyled type="transparent">
+                        <button
+                          v-tooltip="
+                            mod.project_id ? 'Edit mod version' : 'External mods cannot be edited'
+                          "
+                          :disabled="mod.changing || !mod.project_id"
+                          class="!hidden sm:!block"
+                          @click="beginChangeModVersion(mod)"
                         >
-                          <MoreVerticalIcon aria-hidden="true" />
-                          <template #edit>
-                            <EditIcon class="h-5 w-5" />
-                            <span>Edit</span>
+                          <template v-if="mod.changing">
+                            <UiServersIconsLoadingIcon />
                           </template>
-                          <template #delete>
-                            <TrashIcon class="h-5 w-5" />
-                            <span>Delete</span>
+                          <template v-else>
+                            <EditIcon />
                           </template>
-                        </UiServersTeleportOverflowMenu>
+                        </button>
                       </ButtonStyled>
-                    </div>
 
-                    <input
-                      :id="`toggle-${mod.filename}`"
-                      :checked="!mod.disabled"
-                      :disabled="mod.changing"
-                      class="switch stylized-toggle"
-                      type="checkbox"
-                      @change="toggleMod(mod)"
-                    />
+                      <!-- Dropdown for mobile -->
+                      <div class="mr-2 flex items-center sm:hidden">
+                        <UiServersIconsLoadingIcon
+                          v-if="mod.changing"
+                          class="mr-2 h-5 w-5 animate-spin"
+                          style="color: var(--color-base)"
+                        />
+                        <ButtonStyled v-else circular type="transparent">
+                          <UiServersTeleportOverflowMenu
+                            :options="[
+                              {
+                                id: 'edit',
+                                action: () => beginChangeModVersion(mod),
+                                shown: !!(mod.project_id && !mod.changing),
+                              },
+                              {
+                                id: 'delete',
+                                action: () => removeMod(mod),
+                              },
+                            ]"
+                          >
+                            <MoreVerticalIcon aria-hidden="true" />
+                            <template #edit>
+                              <EditIcon class="h-5 w-5" />
+                              <span>Edit</span>
+                            </template>
+                            <template #delete>
+                              <TrashIcon class="h-5 w-5" />
+                              <span>Delete</span>
+                            </template>
+                          </UiServersTeleportOverflowMenu>
+                        </ButtonStyled>
+                      </div>
+
+                      <input
+                        :id="`toggle-${mod.filename}`"
+                        :checked="!mod.disabled"
+                        :disabled="mod.changing"
+                        class="switch stylized-toggle"
+                        type="checkbox"
+                        @change="toggleMod(mod)"
+                      />
+                    </div>
                   </div>
-                </div>
-              </template>
+                </template>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <!-- no mods has platform -->
-      <div
-        v-else-if="
-          !hasMods &&
-          props.server.general?.loader &&
-          props.server.general?.loader.toLocaleLowerCase() !== 'vanilla'
-        "
-        class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
-      >
-        <PackageClosedIcon class="size-24" />
-        <p class="m-0 font-bold text-contrast">No {{ type.toLocaleLowerCase() }}s found!</p>
-        <p class="m-0">
-          Add some {{ type.toLocaleLowerCase() }}s to your server to manage them here.
-        </p>
-        <ButtonStyled color="brand">
-          <NuxtLink :to="`/${type.toLocaleLowerCase()}s?sid=${props.server.serverId}`">
-            <PlusIcon />
-            Add {{ type.toLocaleLowerCase() }}
-          </NuxtLink>
-        </ButtonStyled>
-      </div>
-      <div v-else class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center">
-        <UiServersIconsLoaderIcon loader="Vanilla" class="size-24" />
-        <p class="m-0 pt-3 font-bold text-contrast">Your server is running Vanilla Minecraft</p>
-        <p class="m-0">
-          Add content to your server by installing a modpack or choosing a different platform that
-          supports {{ type }}s.
-        </p>
-        <div class="flex flex-row items-center gap-4">
-          <ButtonStyled class="mt-8">
-            <NuxtLink :to="`/modpacks?sid=${props.server.serverId}`">
-              <CompassIcon />
-              Find a modpack
-            </NuxtLink>
-          </ButtonStyled>
-          <div>or</div>
-          <ButtonStyled class="mt-8">
-            <NuxtLink :to="`/servers/manage/${props.server.serverId}/options/loader`">
-              <WrenchIcon />
-              Change platform
-            </NuxtLink>
-          </ButtonStyled>
+        <!-- no mods has platform -->
+        <div
+          v-else-if="
+            props.server.general?.loader &&
+            props.server.general?.loader.toLocaleLowerCase() !== 'vanilla'
+          "
+          class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
+        >
+          <div
+            v-if="!hasFilteredMods && hasMods"
+            class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
+          >
+            <SearchIcon class="size-24" />
+            <p class="m-0 font-bold text-contrast">
+              No {{ type.toLocaleLowerCase() }}s found for your query!
+            </p>
+            <p class="m-0">Try another query, or show everything.</p>
+            <ButtonStyled>
+              <button @click="showAll">
+                <ListIcon />
+                Show everything
+              </button>
+            </ButtonStyled>
+          </div>
+          <div
+            v-else
+            class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center"
+          >
+            <PackageClosedIcon class="size-24" />
+            <p class="m-0 font-bold text-contrast">No {{ type.toLocaleLowerCase() }}s found!</p>
+            <p class="m-0">
+              Add some {{ type.toLocaleLowerCase() }}s to your server to manage them here.
+            </p>
+            <div class="flex flex-row items-center gap-4">
+              <ButtonStyled type="outlined">
+                <button class="w-full text-nowrap sm:w-fit" @click="initiateFileUpload">
+                  <FileIcon />
+                  Add file
+                </button>
+              </ButtonStyled>
+              <ButtonStyled color="brand">
+                <nuxt-link
+                  class="w-full text-nowrap sm:w-fit"
+                  :to="`/${type.toLocaleLowerCase()}s?sid=${props.server.serverId}`"
+                >
+                  <PlusIcon />
+                  Add {{ type.toLocaleLowerCase() }}
+                </nuxt-link>
+              </ButtonStyled>
+            </div>
+          </div>
         </div>
-      </div>
+        <div v-else class="mt-4 flex h-full flex-col items-center justify-center gap-4 text-center">
+          <UiServersIconsLoaderIcon loader="Vanilla" class="size-24" />
+          <p class="m-0 pt-3 font-bold text-contrast">Your server is running Vanilla Minecraft</p>
+          <p class="m-0">
+            Add content to your server by installing a modpack or choosing a different platform that
+            supports {{ type }}s.
+          </p>
+          <div class="flex flex-row items-center gap-4">
+            <ButtonStyled class="mt-8">
+              <NuxtLink :to="`/modpacks?sid=${props.server.serverId}`">
+                <CompassIcon />
+                Find a modpack
+              </NuxtLink>
+            </ButtonStyled>
+            <div>or</div>
+            <ButtonStyled class="mt-8">
+              <NuxtLink :to="`/servers/manage/${props.server.serverId}/options/loader`">
+                <WrenchIcon />
+                Change platform
+              </NuxtLink>
+            </ButtonStyled>
+          </div>
+        </div>
+      </FilesUploadDragAndDrop>
     </div>
   </div>
 </template>
@@ -290,10 +363,15 @@ import {
   MoreVerticalIcon,
   CompassIcon,
   WrenchIcon,
+  ListIcon,
+  FileIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
+import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
 import type { Server } from "~/composables/pyroServers";
+import { acceptFileFromProjectType } from "~/helpers/fileUtils.js";
 
 const props = defineProps<{
   server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
@@ -304,14 +382,7 @@ const type = computed(() => {
   return loader === "paper" || loader === "purpur" ? "Plugin" : "Mod";
 });
 
-interface Mod {
-  name?: string;
-  filename: string;
-  project_id?: string;
-  version_id?: string;
-  version_number?: string;
-  icon_url?: string;
-  disabled: boolean;
+interface ContentItem extends Mod {
   changing?: boolean;
 }
 
@@ -322,12 +393,41 @@ const listContainer = ref<HTMLElement | null>(null);
 const windowScrollY = ref(0);
 const windowHeight = ref(0);
 
-const localMods = ref<Mod[]>([]);
+const localMods = ref<ContentItem[]>([]);
 
 const searchInput = ref("");
 const modSearchInput = ref("");
 const filterMethod = ref("all");
 
+const uploadDropdownRef = ref();
+
+const handleDroppedFiles = (files: File[]) => {
+  files.forEach((file) => {
+    uploadDropdownRef.value?.uploadFile(file);
+  });
+};
+
+const initiateFileUpload = () => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = acceptFileFromProjectType(type.value.toLowerCase());
+  input.multiple = true;
+  input.onchange = () => {
+    if (input.files) {
+      Array.from(input.files).forEach((file) => {
+        uploadDropdownRef.value?.uploadFile(file);
+      });
+    }
+  };
+  input.click();
+};
+
+const showAll = () => {
+  searchInput.value = "";
+  modSearchInput.value = "";
+  filterMethod.value = "all";
+};
+
 const filterMethodLabel = computed(() => {
   switch (filterMethod.value) {
     case "disabled":
@@ -419,14 +519,17 @@ const debouncedSearch = debounce(() => {
   modSearchInput.value = searchInput.value;
 
   if (pyroContentSentinel.value) {
-    pyroContentSentinel.value.scrollIntoView({
-      behavior: "smooth",
-      block: "start",
-    });
+    const sentinelRect = pyroContentSentinel.value.getBoundingClientRect();
+    if (sentinelRect.top < 0 || sentinelRect.bottom > window.innerHeight) {
+      pyroContentSentinel.value.scrollIntoView({
+        // behavior: "smooth",
+        block: "start",
+      });
+    }
   }
 }, 300);
 
-async function toggleMod(mod: Mod) {
+async function toggleMod(mod: ContentItem) {
   mod.changing = true;
 
   const originalFilename = mod.filename;
@@ -458,7 +561,7 @@ async function toggleMod(mod: Mod) {
   mod.changing = false;
 }
 
-async function removeMod(mod: Mod) {
+async function removeMod(mod: ContentItem) {
   mod.changing = true;
 
   try {
@@ -515,6 +618,10 @@ async function changeModVersion() {
 }
 
 const hasMods = computed(() => {
+  return localMods.value?.length > 0;
+});
+
+const hasFilteredMods = computed(() => {
   return filteredMods.value?.length > 0;
 });
 
diff --git a/apps/frontend/src/pages/servers/manage/[id]/files.vue b/apps/frontend/src/pages/servers/manage/[id]/files.vue
index de29ffcf5..e61e2d6ac 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/files.vue
@@ -25,12 +25,9 @@
       @delete="handleDeleteItem"
     />
 
-    <div
+    <FilesUploadDragAndDrop
       class="relative flex w-full flex-col rounded-2xl border border-solid border-bg-raised"
-      @dragenter.prevent="handleDragEnter"
-      @dragover.prevent="handleDragOver"
-      @dragleave.prevent="handleDragLeave"
-      @drop.prevent="handleDrop"
+      @files-dropped="handleDroppedFiles"
     >
       <div ref="mainContent" class="relative isolate flex w-full flex-col">
         <div v-if="!isEditing" class="contents">
@@ -44,94 +41,14 @@
             @upload="initiateFileUpload"
             @update:search-query="searchQuery = $event"
           />
-          <Transition
-            name="upload-status"
-            @enter="onUploadStatusEnter"
-            @leave="onUploadStatusLeave"
-          >
-            <div
-              v-if="isUploading"
-              ref="uploadStatusRef"
-              class="upload-status rounded-b-xl border-0 border-t border-solid border-bg bg-table-alternateRow text-contrast"
-            >
-              <div class="flex flex-col p-4 text-sm">
-                <div class="flex items-center justify-between">
-                  <div class="flex items-center gap-2 font-bold">
-                    <FolderOpenIcon class="size-4" />
-                    <span>
-                      File Uploads{{
-                        activeUploads.length > 0 ? ` - ${activeUploads.length} left` : ""
-                      }}
-                    </span>
-                  </div>
-                </div>
-
-                <div class="mt-2 space-y-2">
-                  <div
-                    v-for="item in uploadQueue"
-                    :key="item.file.name"
-                    class="flex h-6 items-center justify-between gap-2 text-xs"
-                  >
-                    <div class="flex flex-1 items-center gap-2 truncate">
-                      <transition-group name="status-icon" mode="out-in">
-                        <UiServersPanelSpinner
-                          v-show="item.status === 'uploading'"
-                          key="spinner"
-                          class="absolute !size-4"
-                        />
-                        <CheckCircleIcon
-                          v-show="item.status === 'completed'"
-                          key="check"
-                          class="absolute size-4 text-green"
-                        />
-                        <XCircleIcon
-                          v-show="item.status === 'error' || item.status === 'cancelled'"
-                          key="error"
-                          class="absolute size-4 text-red"
-                        />
-                      </transition-group>
-                      <span class="ml-6 truncate">{{ item.file.name }}</span>
-                      <span class="text-secondary">{{ item.size }}</span>
-                    </div>
-                    <div class="flex min-w-[80px] items-center justify-end gap-2">
-                      <template v-if="item.status === 'completed'">
-                        <span>Done</span>
-                      </template>
-                      <template v-else-if="item.status === 'error'">
-                        <span class="text-red">Failed - File already exists</span>
-                      </template>
-                      <template v-else>
-                        <template v-if="item.status === 'uploading'">
-                          <span>{{ item.progress }}%</span>
-                          <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
-                            <div
-                              class="h-full bg-contrast transition-all duration-200"
-                              :style="{ width: item.progress + '%' }"
-                            />
-                          </div>
-                          <ButtonStyled color="red" type="transparent" @click="cancelUpload(item)">
-                            <button>Cancel</button>
-                          </ButtonStyled>
-                        </template>
-                        <template v-else-if="item.status === 'cancelled'">
-                          <span class="text-red">Cancelled</span>
-                        </template>
-                        <template v-else>
-                          <span>{{ item.progress }}%</span>
-                          <div class="h-1 w-20 overflow-hidden rounded-full bg-bg">
-                            <div
-                              class="h-full bg-contrast transition-all duration-200"
-                              :style="{ width: item.progress + '%' }"
-                            />
-                          </div>
-                        </template>
-                      </template>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </Transition>
+          <FilesUploadDropdown
+            v-if="props.server.fs"
+            ref="uploadDropdownRef"
+            class="rounded-b-xl border-0 border-t border-solid border-bg bg-table-alternateRow"
+            :current-path="currentPath"
+            :fs="props.server.fs"
+            @upload-complete="refreshList()"
+          />
         </div>
 
         <UiServersFilesEditingNavbar
@@ -220,7 +137,7 @@
           <p class="mt-2 text-xl">Drop files here to upload</p>
         </div>
       </div>
-    </div>
+    </FilesUploadDragAndDrop>
 
     <UiServersFilesContextMenu
       ref="contextMenu"
@@ -238,9 +155,10 @@
 
 <script setup lang="ts">
 import { useInfiniteScroll } from "@vueuse/core";
-import { UploadIcon, FolderOpenIcon, CheckCircleIcon, XCircleIcon } from "@modrinth/assets";
-import { ButtonStyled } from "@modrinth/ui";
+import { UploadIcon, FolderOpenIcon } from "@modrinth/assets";
 import type { DirectoryResponse, DirectoryItem, Server } from "~/composables/pyroServers";
+import FilesUploadDragAndDrop from "~/components/ui/servers/FilesUploadDragAndDrop.vue";
+import FilesUploadDropdown from "~/components/ui/servers/FilesUploadDropdown.vue";
 
 interface BaseOperation {
   type: "move" | "rename";
@@ -263,14 +181,6 @@ interface RenameOperation extends BaseOperation {
 
 type Operation = MoveOperation | RenameOperation;
 
-interface UploadItem {
-  file: File;
-  progress: number;
-  status: "pending" | "uploading" | "completed" | "error" | "cancelled";
-  size: string;
-  uploader?: any;
-}
-
 const props = defineProps<{
   server: Server<["general", "content", "backups", "network", "startup", "ws", "fs"]>;
 }>();
@@ -312,46 +222,8 @@ const isEditingImage = ref(false);
 const imagePreview = ref();
 
 const isDragging = ref(false);
-const dragCounter = ref(0);
-
-const uploadStatusRef = ref<HTMLElement | null>(null);
-const isUploading = computed(() => uploadQueue.value.length > 0);
-const uploadQueue = ref<UploadItem[]>([]);
-
-const activeUploads = computed(() =>
-  uploadQueue.value.filter((item) => item.status === "pending" || item.status === "uploading"),
-);
-
-const onUploadStatusEnter = (el: Element) => {
-  const height = (el as HTMLElement).scrollHeight;
-  (el as HTMLElement).style.height = "0";
-  // eslint-disable-next-line no-void
-  void (el as HTMLElement).offsetHeight;
-  (el as HTMLElement).style.height = `${height}px`;
-};
 
-const onUploadStatusLeave = (el: Element) => {
-  const height = (el as HTMLElement).scrollHeight;
-  (el as HTMLElement).style.height = `${height}px`;
-  // eslint-disable-next-line no-void
-  void (el as HTMLElement).offsetHeight;
-  (el as HTMLElement).style.height = "0";
-};
-
-watch(
-  uploadQueue,
-  () => {
-    if (!uploadStatusRef.value) return;
-    const el = uploadStatusRef.value;
-    const itemsHeight = uploadQueue.value.length * 32;
-    const headerHeight = 12;
-    const gap = 8;
-    const padding = 32;
-    const totalHeight = padding + headerHeight + gap + itemsHeight;
-    el.style.height = `${totalHeight}px`;
-  },
-  { deep: true },
-);
+const uploadDropdownRef = ref();
 
 const data = computed(() => props.server.general);
 
@@ -917,135 +789,12 @@ const requestShareLink = async () => {
   }
 };
 
-const handleDragEnter = (event: DragEvent) => {
+const handleDroppedFiles = (files: File[]) => {
   if (isEditing.value) return;
-  event.preventDefault();
-  if (!event.dataTransfer?.types.includes("application/pyro-file-move")) {
-    dragCounter.value++;
-    isDragging.value = true;
-  }
-};
-
-const handleDragOver = (event: DragEvent) => {
-  if (isEditing.value) return;
-  event.preventDefault();
-};
-
-const handleDragLeave = (event: DragEvent) => {
-  if (isEditing.value) return;
-  event.preventDefault();
-  dragCounter.value--;
-  if (dragCounter.value === 0) {
-    isDragging.value = false;
-  }
-};
-
-// eslint-disable-next-line require-await
-const handleDrop = async (event: DragEvent) => {
-  if (isEditing.value) return;
-  event.preventDefault();
-  isDragging.value = false;
-  dragCounter.value = 0;
-
-  const isInternalMove = event.dataTransfer?.types.includes("application/pyro-file-move");
-  if (isInternalMove) return;
-
-  const files = event.dataTransfer?.files;
-  if (files) {
-    Array.from(files).forEach((file) => {
-      uploadFile(file);
-    });
-  }
-};
-
-const formatFileSize = (bytes: number): string => {
-  if (bytes < 1024) return bytes + " B";
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
-  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-};
 
-const cancelUpload = (item: UploadItem) => {
-  if (item.uploader && item.status === "uploading") {
-    item.uploader.cancel();
-    item.status = "cancelled";
-
-    setTimeout(async () => {
-      const index = uploadQueue.value.findIndex((qItem) => qItem.file.name === item.file.name);
-      if (index !== -1) {
-        uploadQueue.value.splice(index, 1);
-        await nextTick();
-      }
-    }, 5000);
-  }
-};
-
-const uploadFile = async (file: File) => {
-  const uploadItem: UploadItem = {
-    file,
-    progress: 0,
-    status: "pending",
-    size: formatFileSize(file.size),
-  };
-
-  uploadQueue.value.push(uploadItem);
-
-  try {
-    uploadItem.status = "uploading";
-    const filePath = `${currentPath.value}/${file.name}`.replace("//", "/");
-    const uploader = await props.server.fs?.uploadFile(filePath, file);
-    uploadItem.uploader = uploader;
-
-    if (uploader?.onProgress) {
-      uploader.onProgress(({ progress }: { progress: number }) => {
-        const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
-        if (index !== -1) {
-          uploadQueue.value[index].progress = Math.round(progress);
-        }
-      });
-    }
-
-    await uploader?.promise;
-    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
-    if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
-      uploadQueue.value[index].status = "completed";
-      uploadQueue.value[index].progress = 100;
-    }
-
-    await nextTick();
-
-    setTimeout(async () => {
-      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name);
-      if (removeIndex !== -1) {
-        uploadQueue.value.splice(removeIndex, 1);
-        await nextTick();
-      }
-    }, 5000);
-
-    await refreshList();
-  } catch (error) {
-    console.error("Error uploading file:", error);
-    const index = uploadQueue.value.findIndex((item) => item.file.name === file.name);
-    if (index !== -1 && uploadQueue.value[index].status !== "cancelled") {
-      uploadQueue.value[index].status = "error";
-    }
-
-    setTimeout(async () => {
-      const removeIndex = uploadQueue.value.findIndex((item) => item.file.name === file.name);
-      if (removeIndex !== -1) {
-        uploadQueue.value.splice(removeIndex, 1);
-        await nextTick();
-      }
-    }, 5000);
-
-    if (error instanceof Error && error.message !== "Upload cancelled") {
-      addNotification({
-        group: "files",
-        title: "Upload failed",
-        text: `Failed to upload ${file.name}`,
-        type: "error",
-      });
-    }
-  }
+  files.forEach((file) => {
+    uploadDropdownRef.value?.uploadFile(file);
+  });
 };
 
 const initiateFileUpload = () => {
@@ -1055,7 +804,7 @@ const initiateFileUpload = () => {
   input.onchange = () => {
     if (input.files) {
       Array.from(input.files).forEach((file) => {
-        uploadFile(file);
+        uploadDropdownRef.value?.uploadFile(file);
       });
     }
   };
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
index 6eeba49b2..35a863db3 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/loader.vue
@@ -330,11 +330,11 @@
                 <UploadIcon class="size-4" /> Upload .mrpack file
               </button>
             </ButtonStyled>
-            <DownloadIcon v-if="hasNewerVersion" color="brand">
+            <ButtonStyled v-if="hasNewerVersion" color="brand">
               <button class="!w-full sm:!w-auto" @click="handleUpdateToLatest">
                 <UploadIcon class="size-4" /> Update modpack
               </button>
-            </DownloadIcon>
+            </ButtonStyled>
           </div>
         </div>
         <div v-if="data.upstream" class="contents">
diff --git a/apps/frontend/src/types/servers.ts b/apps/frontend/src/types/servers.ts
index 7ba96f797..8f76f594f 100644
--- a/apps/frontend/src/types/servers.ts
+++ b/apps/frontend/src/types/servers.ts
@@ -1,11 +1,11 @@
-export interface Mod {
-  id: string;
-  filename: string;
-  modrinth_ids: {
-    project_id: string;
-    version_id: string;
-  };
-}
+// export interface Mod {
+//   id: string;
+//   filename: string;
+//   modrinth_ids: {
+//     project_id: string;
+//     version_id: string;
+//   };
+// }
 
 interface License {
   id: string;