[stable33] fix(theming): display error messages on image upload and delete previous image only after validation

apps/theming/lib/ImageManager.php

@@ -202,8 +202,6 @@ public function delete(string $key): void {
 	}
 
 	public function updateImage(string $key, string $tmpFile): string {
-		$this->delete($key);
-
 		try {
 			$folder = $this->getRootFolder()->getFolder('images');
 		} catch (NotFoundException $e) {
@@ -217,6 +215,8 @@ public function updateImage(string $key, string $tmpFile): string {
 			throw new \Exception('Unsupported image type: ' . $detectedMimeType);
 		}
 
+		$this->delete($key);
+
 		if ($key === 'background') {
 			if ($this->shouldOptimizeBackgroundImage($detectedMimeType, filesize($tmpFile))) {
 				try {

apps/theming/src/components/admin/FileInputField.vue

@@ -7,7 +7,7 @@
 import type { AdminThemingParameters } from '../../types.d.ts'
 
 import { mdiImageOutline, mdiUndo } from '@mdi/js'
-import axios from '@nextcloud/axios'
+import axios, { isAxiosError } from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
@@ -76,8 +76,17 @@ async function onChange() {
 		})
 		mime.value = file.type
 		emit('updated')
+	} catch (error) {
+		if (isAxiosError(error) && error.response?.status === 422) {
+			const serverMessage = error.response.data?.data?.message
+			showError(serverMessage || t('theming', 'Failed to upload image'))
+		} else {
+			showError(t('theming', 'Failed to upload image'))
+		}
 	} finally {
 		isSaving.value = false
+		// Reset input to allow re-selecting the same file and show validation errors on every attempt
+		inputElement.value!.value = ''
 	}
 }
 

dist/theming-settings-admin.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './theming-theming-settings-admin-CTPoFq1u.chunk.css';
+@import './theming-theming-settings-admin-ljDcYh_G.chunk.css';
 @import './createElementId-DhjFt1I9-C_oBIsvc.chunk.css';
 @import './logger-D3RVzcfQ-R3us1MM8.chunk.css';
 @import './NcNoteCard-Cok_4Fld-Jq77EThs.chunk.css';