feat(theming): add mime accept in Theming image file picker

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/theming/lib/ImageManager.php

@@ -323,7 +323,7 @@ private function shouldOptimizeBackgroundImage(string $mimeType, int $contentSiz
 	 * @param string $key The image key, e.g. "favicon"
 	 * @return string[]
 	 */
-	private function getSupportedUploadImageFormats(string $key): array {
+	public function getSupportedUploadImageFormats(string $key): array {
 		$supportedFormats = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
 
 		if ($key !== 'favicon' || $this->shouldReplaceIcons() === true) {

apps/theming/lib/Settings/Admin.php

@@ -28,6 +28,7 @@
 namespace OCA\Theming\Settings;
 
 use OCA\Theming\AppInfo\Application;
+use OCA\Theming\Controller\ThemingController;
 use OCA\Theming\ImageManager;
 use OCA\Theming\ThemingDefaults;
 use OCP\AppFramework\Http\TemplateResponse;
@@ -75,6 +76,11 @@ public function getForm(): TemplateResponse {
 			$errorMessage = $this->l->t('You are already using a custom theme. Theming app settings might be overwritten by that.');
 		}
 
+		$allowedMimeTypes = array_reduce(ThemingController::VALID_UPLOAD_KEYS, function($carry, $key) {
+			$carry[$key] = $this->imageManager->getSupportedUploadImageFormats($key);
+			return $carry;
+		}, []);
+
 		$this->initialState->provideInitialState('adminThemingParameters', [
 			'isThemable' => $themable,
 			'notThemableErrorMessage' => $errorMessage,
@@ -92,6 +98,7 @@ public function getForm(): TemplateResponse {
 			'docUrlIcons' => $this->urlGenerator->linkToDocs('admin-theming-icons'),
 			'canThemeIcons' => $this->imageManager->shouldReplaceIcons(),
 			'userThemingDisabled' => $this->themingDefaults->isUserThemingDisabled(),
+			'allowedMimeTypes' => $allowedMimeTypes,
 		]);
 
 		Util::addScript($this->appName, 'admin-theming');

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

@@ -71,6 +71,7 @@
 		</NcNoteCard>
 
 		<input ref="input"
+			:accept="acceptMime"
 			type="file"
 			@change="onChange">
 	</div>
@@ -79,6 +80,7 @@
 <script>
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
@@ -89,6 +91,10 @@ import Upload from 'vue-material-design-icons/Upload.vue'
 
 import FieldMixin from '../../mixins/admin/FieldMixin.js'
 
+const {
+	allowedMimeTypes,
+} = loadState('theming', 'adminThemingParameters', {})
+
 export default {
 	name: 'FileInputField',
 
@@ -135,6 +141,8 @@ export default {
 	data() {
 		return {
 			showLoading: false,
+			acceptMime: (allowedMimeTypes[this.name]
+				|| ['image/jpeg', 'image/png', 'image/gif', 'image/webp']).join(','),
 		}
 	},