From c4477fc7ab8ddbd88935d57255823008608ed203 Mon Sep 17 00:00:00 2001
From: Luke Mino-Altherr <luke@comfy.org>
Date: Wed, 12 Nov 2025 16:40:53 -0800
Subject: [PATCH] [feat] Add feature-flagged upload button to asset browser
 (#6665)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Adds an upload button to the asset browser modal, controlled by the
`model_upload_button_enabled` backend feature flag.

## Changes
- **What**: Added upload button with PrimeVue primary styling to asset
browser header
- **Feature Flag**: Button only appears when backend returns
`model_upload_button_enabled: true`
- **Localization**: Added `assetBrowser.uploadModel` translation key
- **Click Handler**: Currently logs to console (implementation pending)

## Review Focus
- Feature flag integration using `useFeatureFlags` composable
- Button styling matches PrimeVue primary color scheme
- Proper placement in header with flexbox layout

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6665-feat-Add-feature-flagged-upload-button-to-asset-browser-2a96d73d365081c7a05bdc33bed7f7fd)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/composables/useFeatureFlags.ts            |  9 ++++-
 src/locales/en/main.json                      |  1 +
 .../assets/components/AssetBrowserModal.vue   | 37 +++++++++++++++----
 src/types/buttonTypes.ts                      | 13 +++++--
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts
index 9a0bcd03d..643bb103f 100644
--- a/src/composables/useFeatureFlags.ts
+++ b/src/composables/useFeatureFlags.ts
@@ -8,7 +8,8 @@ import { api } from '@/scripts/api'
 export enum ServerFeatureFlag {
   SUPPORTS_PREVIEW_METADATA = 'supports_preview_metadata',
   MAX_UPLOAD_SIZE = 'max_upload_size',
-  MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4'
+  MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
+  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled'
 }
 
 /**
@@ -24,6 +25,12 @@ export function useFeatureFlags() {
     },
     get supportsManagerV4() {
       return api.getServerFeature(ServerFeatureFlag.MANAGER_SUPPORTS_V4)
+    },
+    get modelUploadButtonEnabled() {
+      return api.getServerFeature(
+        ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
+        false
+      )
     }
   })
 
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 5a297bf23..bce0628b6 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1984,6 +1984,7 @@
     "failedToCreateNode": "Failed to create node. Please try again or check console for details.",
     "noModelsInFolder": "No {type} available in this folder",
     "searchAssetsPlaceholder": "Type to search...",
+    "uploadModel": "Upload model",
     "allModels": "All Models",
     "allCategory": "All {category}",
     "unknown": "Unknown",
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index dccd36208..2f0469e38 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -21,13 +21,27 @@
     </template>
 
     <template #header>
-      <SearchBox
-        v-model="searchQuery"
-        :autofocus="true"
-        size="lg"
-        :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
-        class="max-w-96"
-      />
+      <div class="flex w-full items-center justify-between gap-2">
+        <SearchBox
+          v-model="searchQuery"
+          :autofocus="true"
+          size="lg"
+          :placeholder="$t('assetBrowser.searchAssetsPlaceholder')"
+          class="max-w-96"
+        />
+        <IconTextButton
+          v-if="isUploadButtonEnabled"
+          type="accent"
+          size="md"
+          class="!h-10 [&>span]:hidden md:[&>span]:inline"
+          :label="$t('assetBrowser.uploadModel')"
+          :on-click="handleUploadClick"
+        >
+          <template #icon>
+            <i class="icon-[lucide--upload]" />
+          </template>
+        </IconTextButton>
+      </div>
     </template>
 
     <template #contentFilter>
@@ -52,9 +66,11 @@ import { useAsyncState } from '@vueuse/core'
 import { computed, provide, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import IconTextButton from '@/components/button/IconTextButton.vue'
 import SearchBox from '@/components/input/SearchBox.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
 import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
@@ -168,4 +184,11 @@ function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
   // It handles the appropriate transformation (filename extraction or full asset)
   props.onSelect?.(asset)
 }
+
+const { flags } = useFeatureFlags()
+const isUploadButtonEnabled = computed(() => flags.modelUploadButtonEnabled)
+
+function handleUploadClick() {
+  // Will be implemented in the future commit
+}
 </script>
diff --git a/src/types/buttonTypes.ts b/src/types/buttonTypes.ts
index 7b455db5c..39413209c 100644
--- a/src/types/buttonTypes.ts
+++ b/src/types/buttonTypes.ts
@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'vue'
 
 export type ButtonSize = 'fit-content' | 'sm' | 'md'
-type ButtonType = 'primary' | 'secondary' | 'transparent'
+type ButtonType = 'primary' | 'secondary' | 'transparent' | 'accent'
 type ButtonBorder = boolean
 
 export interface BaseButtonProps {
@@ -28,7 +28,9 @@ export const getButtonTypeClasses = (type: ButtonType = 'primary') => {
     secondary:
       'bg-white border-none text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
     transparent:
-      'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-200'
+      'bg-transparent border-none text-neutral-600 dark-theme:text-neutral-200',
+    accent:
+      'bg-primary-background hover:bg-primary-background-hover border-none text-white font-bold'
   } as const
 
   return baseByType[type]
@@ -40,14 +42,17 @@ export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => {
       'bg-neutral-900 text-white dark-theme:bg-white dark-theme:text-neutral-900',
     secondary:
       'bg-white text-neutral-950 dark-theme:bg-zinc-700 dark-theme:text-white',
-    transparent: 'bg-transparent text-neutral-600 dark-theme:text-neutral-400'
+    transparent: 'bg-transparent text-neutral-600 dark-theme:text-neutral-400',
+    accent:
+      'bg-primary-background hover:bg-primary-background-hover text-white font-bold'
   } as const
 
   const borderByType = {
     primary: 'border border-solid border-white dark-theme:border-neutral-900',
     secondary: 'border border-solid border-neutral-950 dark-theme:border-white',
     transparent:
-      'border border-solid border-neutral-950 dark-theme:border-white'
+      'border border-solid border-neutral-950 dark-theme:border-white',
+    accent: 'border border-solid border-primary-background'
   } as const
 
   return `${baseByType[type]} ${borderByType[type]}`