Upload floor-map blueprints (light/dark) instead of typing a path

The Floor Map settings only had text fields for the blueprint image path with
no way to upload one. Add a real upload.

- POST /settings/map-blueprint (multipart: file + theme) saves the image to the
  instance maps dir and points map_blueprint_<theme> at the served URL;
  GET /settings/map-blueprint/<file> serves it (public - kiosks read the map).
- Settings > Floor Map: a file picker + thumbnail next to each theme's field
  (still accepts a manual path/URL too).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/api/index.js

@@ -793,6 +793,12 @@ export const settingsApi = {
   },
   create(data) {
     return api.post('/settings', data)
+  },
+  uploadMapBlueprint(theme, file) {
+    const form = new FormData()
+    form.append('theme', theme)
+    form.append('file', file)
+    return api.post('/settings/map-blueprint', form, { headers: { 'Content-Type': 'multipart/form-data' } })
   }
 }
 

frontend/src/views/settings/SystemSettings.vue

@@ -358,7 +358,7 @@
 
         <div class="setting-row">
           <label>
-            <span>Blueprint image URL (light theme)</span>
+            <span>Blueprint image (light theme)</span>
             <input
               type="text"
               v-model="settings.map_blueprint_light"
@@ -366,13 +366,17 @@
               @blur="saveSetting('map_blueprint_light', settings.map_blueprint_light)"
               :disabled="saving"
             >
-            <small class="input-hint">Path or URL to the light-theme floor plan</small>
+            <div class="map-upload-row">
+              <input type="file" accept="image/*" @change="uploadBlueprint('light', $event)" :disabled="mapUploading" />
+              <img v-if="settings.map_blueprint_light" :src="settings.map_blueprint_light" class="map-thumb" alt="light blueprint" />
+            </div>
+            <small class="input-hint">Upload an image, or type a path/URL to the light-theme floor plan</small>
           </label>
         </div>
 
         <div class="setting-row">
           <label>
-            <span>Blueprint image URL (dark theme)</span>
+            <span>Blueprint image (dark theme)</span>
             <input
               type="text"
               v-model="settings.map_blueprint_dark"
@@ -380,7 +384,11 @@
               @blur="saveSetting('map_blueprint_dark', settings.map_blueprint_dark)"
               :disabled="saving"
             >
-            <small class="input-hint">Path or URL to the dark-theme floor plan</small>
+            <div class="map-upload-row">
+              <input type="file" accept="image/*" @change="uploadBlueprint('dark', $event)" :disabled="mapUploading" />
+              <img v-if="settings.map_blueprint_dark" :src="settings.map_blueprint_dark" class="map-thumb map-thumb-dark" alt="dark blueprint" />
+            </div>
+            <small class="input-hint">Upload an image, or type a path/URL to the dark-theme floor plan</small>
           </label>
         </div>
 
@@ -788,6 +796,7 @@ const computerTypes = ref([])    // ComputerType names for the dropdown
 
 const loading = ref(true)
 const saving = ref(false)
+const mapUploading = ref(false)
 const testingEmail = ref(false)
 const error = ref('')
 const success = ref('')
@@ -908,6 +917,27 @@ async function changePcTypeMapping(pxetype, computertype) {
   }
 }
 
+async function uploadBlueprint(theme, event) {
+  const file = event.target.files[0]
+  if (!file) return
+  mapUploading.value = true
+  error.value = ''
+  success.value = ''
+  try {
+    const { data } = await settingsApi.uploadMapBlueprint(theme, file)
+    const url = data?.data?.value
+    if (theme === 'light') settings.map_blueprint_light = url
+    else settings.map_blueprint_dark = url
+    success.value = 'Blueprint uploaded'
+    setTimeout(() => { success.value = '' }, 2000)
+  } catch (e) {
+    error.value = apiError(e, 'Upload failed')
+  } finally {
+    mapUploading.value = false
+    event.target.value = ''
+  }
+}
+
 async function toggleSetting(key) {
   const newValue = !settings[key]
   await saveSetting(key, newValue)
@@ -1319,4 +1349,7 @@ onMounted(loadSettings)
 .identifier-matrix .identifier-name {
   color: var(--text);
 }
+.map-upload-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
+.map-thumb { height: 40px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
+.map-thumb-dark { background: #222; }
 </style>