fix: custom background file picker shows an empty file dialog

apps/theming/src/components/UserSectionBackground.vue

@@ -147,7 +147,7 @@ async function pickColor(color?: string) {
 async function pickFile() {
 	await getFilePickerBuilder(t('theming', 'Select a background from your files'))
 		.allowDirectories(false)
-		.setFilter((node) => node.mime.startsWith('image/'))
+		.setFilter((node) => node.type === 'folder' || node.mime?.startsWith('image/'))
 		.setMultiSelect(false)
 		.addButton({
 			label: t('theming', 'Select background'),

apps/theming/src/components/__tests__/UserSectionBackground.spec.ts

@@ -0,0 +1,87 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import UserSectionBackground from '../UserSectionBackground.vue'
+
+type PickerFilter = (node: { type?: string, mime?: string }) => boolean | undefined
+
+const setFilter = vi.hoisted(() => vi.fn<(filter: PickerFilter) => unknown>())
+
+vi.mock('@nextcloud/dialogs', () => ({
+	getFilePickerBuilder: vi.fn(() => {
+		const builder = {
+			allowDirectories: vi.fn(),
+			setFilter,
+			setMultiSelect: vi.fn(),
+			addButton: vi.fn(),
+			build: vi.fn(),
+		}
+
+		builder.allowDirectories.mockReturnValue(builder)
+		builder.setFilter.mockReturnValue(builder)
+		builder.setMultiSelect.mockReturnValue(builder)
+		builder.addButton.mockReturnValue(builder)
+		builder.build.mockReturnValue({
+			pick: vi.fn().mockResolvedValue(undefined),
+		})
+
+		return builder
+	}),
+}))
+
+vi.mock('@nextcloud/initial-state', () => ({
+	loadState: vi.fn((_app: string, key: string) => {
+		switch (key) {
+		case 'shippedBackgrounds':
+			return {}
+		case 'themingDefaults':
+			return {
+				backgroundImage: '',
+				backgroundColor: '#ffffff',
+				backgroundMime: '',
+				defaultShippedBackground: '',
+			}
+		case 'data':
+			return {
+				backgroundImage: '',
+				backgroundColor: '#ffffff',
+				backgroundMime: '',
+			}
+		case 'userBackgroundImage':
+			return 'default'
+		default:
+			throw new Error(`Unexpected initial state key: ${key}`)
+		}
+	}),
+}))
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: (_app: string, text: string) => text,
+}))
+
+describe('UserSectionBackground', () => {
+	it('keeps folders and images while filtering other files', async () => {
+		const wrapper = shallowMount(UserSectionBackground, {
+			global: {
+				stubs: {
+					NcSettingsSection: {
+						template: '<section><slot /></section>',
+					},
+				},
+			},
+		})
+
+		await wrapper.get('button[aria-label="Custom background"]').trigger('click')
+
+		expect(setFilter).toHaveBeenCalledOnce()
+		const filter = setFilter.mock.calls[0]![0]
+		expect(filter({ type: 'folder' })).toBe(true)
+		expect(filter({ mime: 'image/png' })).toBe(true)
+		expect(filter({ mime: 'text/plain' })).toBe(false)
+		expect(filter({})).toBeFalsy()
+	})
+})