diff --git a/web/src/lib/managers/upload-manager.svelte.ts b/web/src/lib/managers/upload-manager.svelte.ts
new file mode 100644
index 0000000000..0ff2b0c214
--- /dev/null
+++ b/web/src/lib/managers/upload-manager.svelte.ts
@@ -0,0 +1,24 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import { getSupportedMediaTypes, type ServerMediaTypesResponseDto } from '@immich/sdk';
+
+class UploadManager {
+  mediaTypes = $state<ServerMediaTypesResponseDto>({ image: [], sidecar: [], video: [] });
+
+  constructor() {
+    eventManager.on('app.init', () => void this.#loadExtensions());
+  }
+
+  async #loadExtensions() {
+    try {
+      this.mediaTypes = await getSupportedMediaTypes();
+    } catch {
+      console.error('Failed to load supported media types');
+    }
+  }
+
+  getExtensions() {
+    return [...this.mediaTypes.image, ...this.mediaTypes.video];
+  }
+}
+
+export const uploadManager = new UploadManager();
diff --git a/web/src/lib/utils/file-uploader.ts b/web/src/lib/utils/file-uploader.ts
index 9b0361e1e0..56a152266b 100644
--- a/web/src/lib/utils/file-uploader.ts
+++ b/web/src/lib/utils/file-uploader.ts
@@ -1,4 +1,5 @@
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { uploadManager } from '$lib/managers/upload-manager.svelte';
 import { UploadState } from '$lib/models/upload-asset';
 import { uploadAssetsStore } from '$lib/stores/upload';
 import { uploadRequest } from '$lib/utils';
@@ -11,7 +12,6 @@ import {
   checkBulkUpload,
   getAssetOriginalPath,
   getBaseUrl,
-  getSupportedMediaTypes,
   type AssetMediaResponseDto,
 } from '@immich/sdk';
 import { tick } from 'svelte';
@@ -40,25 +40,15 @@ export const addDummyItems = () => {
 
 // addDummyItems();
 
-let _extensions: string[];
-
 export const uploadExecutionQueue = new ExecutorQueue({ concurrency: 2 });
 
-const getExtensions = async () => {
-  if (!_extensions) {
-    const { image, video } = await getSupportedMediaTypes();
-    _extensions = [...image, ...video];
-  }
-  return _extensions;
-};
-
 type FileUploadParam = { multiple?: boolean } & (
   | { albumId?: string; assetId?: never }
   | { albumId?: never; assetId?: string }
 );
 export const openFileUploadDialog = async (options: FileUploadParam = {}) => {
   const { albumId, multiple = true, assetId } = options;
-  const extensions = await getExtensions();
+  const extensions = uploadManager.getExtensions();
 
   return new Promise<(string | undefined)[]>((resolve, reject) => {
     try {
@@ -99,7 +89,7 @@ export const fileUploadHandler = async ({
   replaceAssetId,
   isLockedAssets = false,
 }: FileUploadHandlerParams): Promise<string[]> => {
-  const extensions = await getExtensions();
+  const extensions = uploadManager.getExtensions();
   const promises = [];
   for (const file of files) {
     const name = file.name.toLowerCase();