From de53d10e3bb3d26c397dbda244474159744e22ad Mon Sep 17 00:00:00 2001
From: Bangarang <bangarang@hatch>
Date: Fri, 18 Sep 2026 09:15:12 +0000
Subject: [PATCH] fix(admin): make Upload new icon button open the file picker

The hidden file input was triggered via native label forwarding through
an NcButton wrapped in <label for="uploadicon">. NcButton attaches its
own click handler and renders a <button> inside the <label> (invalid
interactive content), so the click never reached the input and no file
picker opened.

Replace the label with an explicit @click handler that programmatically
clicks the hidden input via a template ref.

Fixes #1113
---
 src/AdminSettings.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/AdminSettings.vue b/src/AdminSettings.vue
index 28216af1..dcf8fbb6 100644
--- a/src/AdminSettings.vue
+++ b/src/AdminSettings.vue
@@ -102,19 +102,18 @@
 			<form class="upload-button" @submit.prevent>
 				<input
 					id="uploadicon"
+					ref="uploadInput"
 					class="hidden-upload-input"
 					name="uploadicon"
 					type="file"
 					accept="image/*"
 					@change="handleIconUpload">
-				<label for="uploadicon">
-					<NcButton tag="span" :aria-label="t('external', 'Upload new icon')">
-						<template #icon>
-							<Upload :size="20" />
-						</template>
-						{{ t('external', 'Upload new icon') }}
-					</NcButton>
-				</label>
+				<NcButton :aria-label="t('external', 'Upload new icon')" @click="triggerIconUpload">
+					<template #icon>
+						<Upload :size="20" />
+					</template>
+					{{ t('external', 'Upload new icon') }}
+				</NcButton>
 				<span v-if="uploadMessage" class="upload-message">{{ uploadMessage }}</span>
 			</form>
 		</NcSettingsSection>
@@ -182,6 +181,7 @@ const groupedIcons = computed<IconGroup[]>(() => {
 })
 const editingSite: Ref<SiteWithErrors | null> = ref(null)
 const uploadMessage = ref('')
+const uploadInput: Ref<HTMLInputElement | null> = ref(null)
 
 const config: Ref<ExternalWebsiteConfig> = ref({
 	devices: [],
@@ -303,6 +303,10 @@ async function removeIconGroup(group: IconGroup) {
 	availableIcons.value = availableIcons.value.filter((i) => !groupIconNames.has(i.icon))
 }
 
+function triggerIconUpload() {
+	uploadInput.value?.click()
+}
+
 /**
  *
  * @param event