From f382b8d48fd894434e3c02f8f3b07e770af50266 Mon Sep 17 00:00:00 2001
From: E <2974895+eduardomozart@users.noreply.github.com>
Date: Tue, 18 Aug 2026 16:21:38 -0300
Subject: [PATCH 1/2] feat(web): add file extension validation to file browser
 modal

---
 src_assets/common/assets/web/apps.html             | 14 ++++++++++++--
 .../common/assets/web/public/assets/locale/en.json |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index 32b3e0af9ed..fb074e43c6b 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -309,7 +309,7 @@ <h5 class="modal-title" id="appEditModalLabel">
                 <input type="text" class="form-control monospace" id="appImagePath" aria-describedby="appImagePathHelp"
                   v-model="editForm['image-path']" />
                 <button class="btn btn-secondary" type="button"
-                  @click="browseFor('file', 'file_browser.select_file', editForm['image-path'], v => editForm['image-path'] = v)">
+                  @click="browseFor('file', 'file_browser.select_file', editForm['image-path'], v => editForm['image-path'] = v, ['.png'])">
                   <folder-open :size="18" class="icon"></folder-open>
                 </button>
                 <button class="btn btn-secondary" type="button" @click="showCoverFinder">
@@ -630,6 +630,7 @@ <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
         fileBrowserType: "any",
         fileBrowserTitle: "",
         fileBrowserCallback: null,
+        fileBrowserAcceptedExtensions: null,
         fileBrowserCurrentPath: "",
         fileBrowserParentPath: "",
         fileBrowserEntries: [],
@@ -907,10 +908,11 @@ <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
         })
           .finally(() => this.coverFinderBusy = false);
       },
-      browseFor(type, titleKey, startPath, callback) {
+      browseFor(type, titleKey, startPath, callback, acceptedExtensions = null) {
         this.fileBrowserType = type;
         this.fileBrowserTitle = this.$t(titleKey);
         this.fileBrowserCallback = callback;
+        this.fileBrowserAcceptedExtensions = acceptedExtensions;
         this.fileBrowserSelectedPath = startPath || '';
         this.fileBrowserTypedPath = startPath || '';
         this.fileBrowserError = '';
@@ -924,6 +926,14 @@ <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
       fileBrowserConfirm() {
         const path = this.fileBrowserSelectedPath || this.fileBrowserTypedPath;
         if (path) {
+          if (this.fileBrowserAcceptedExtensions && this.fileBrowserType !== 'directory') {
+            const lowerPath = path.toLowerCase();
+            const isValid = this.fileBrowserAcceptedExtensions.some(ext => lowerPath.endsWith(ext.toLowerCase()));
+            if (!isValid) {
+              this.fileBrowserError = this.$t('file_browser.error_invalid_extension', { extensions: this.fileBrowserAcceptedExtensions.join(', ') });
+              return;
+            }
+          }
           if (this.fileBrowserCallback) {
             this.fileBrowserCallback(path);
             this.fileBrowserCallback = null;
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index 4735edada12..631ea308d81 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -634,6 +634,7 @@
   },
   "file_browser": {
     "empty": "No items to display",
+    "error_invalid_extension": "Selected file must have one of the following extensions: {extensions}",
     "root": "Root",
     "select": "Select",
     "select_directory": "Select Directory",

From 78e39fe51600fcb48927733e50e78f970fcaf6d8 Mon Sep 17 00:00:00 2001
From: E <2974895+eduardomozart@users.noreply.github.com>
Date: Tue, 18 Aug 2026 16:40:56 -0300
Subject: [PATCH 2/2] feat(web): add validation for manually typed image paths

---
 src_assets/common/assets/web/apps.html | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index fb074e43c6b..2cfbef369d0 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -124,6 +124,8 @@ <h5 class="modal-title" id="appEditModalLabel">
               :aria-label="$t('_common.close')"></button>
           </div>
           <div class="modal-body">
+            <!-- Error -->
+            <div v-if="editFormError" class="alert alert-danger py-2 small">{{ editFormError }}</div>
             <!-- Application Name -->
             <div class="mb-3">
               <label for="appName" class="form-label">{{ $t('apps.app_name') }}</label>
@@ -621,6 +623,7 @@ <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
       return {
         apps: [],
         editForm: null,
+        editFormError: "",
         detachedCmd: "",
         coverSearching: false,
         coverFinderBusy: false,
@@ -742,6 +745,7 @@ <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
           detached: [],
           "image-path": ""
         };
+        this.editFormError = "";
         this.openEditModal();
       },
       editApp(id) {
@@ -765,6 +769,7 @@ <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
         if (this.editForm["exit-timeout"] === undefined) {
           this.editForm["exit-timeout"] = 5;
         }
+        this.editFormError = "";
         this.openEditModal();
       },
       showDeleteModal(id) {
@@ -994,7 +999,17 @@ <h5 class="modal-title">{{ fileBrowserTitle || $t('file_browser.title') }}</h5>
         });
       },
       save() {
+        this.editFormError = "";
         this.editForm["image-path"] = this.editForm["image-path"].toString().replace(/"/g, '');
+        
+        const imagePath = this.editForm["image-path"];
+        if (imagePath && !imagePath.toLowerCase().endsWith('.png')) {
+          this.editFormError = this.$t('file_browser.error_invalid_extension', { extensions: '.png' });
+          const modalBody = this.$refs.editModal.querySelector('.modal-body');
+          if (modalBody) modalBody.scrollTop = 0;
+          return;
+        }
+
         apiFetch("./api/apps", {
           method: "POST",
           headers: {