Keep media rename file extensions fixed

src/web/public/js/settings/media-library.js

@@ -556,9 +556,11 @@ function showPreviewModal() {
 if (modal && body) {
   const renameForm = modal.querySelector('[data-media-gallery-rename-form]');
   const filenameInput = modal.querySelector('[data-media-gallery-filename]');
+  const extensionLabel = modal.querySelector('[data-media-gallery-extension]');
   const renameSave = modal.querySelector('[data-media-gallery-rename-save]');
   const renameStatus = modal.querySelector('[data-media-gallery-rename-status]');
   let activePreview = null;
+  let activeExtension = '';
 
   if (renameForm && filenameInput && renameSave && renameStatus) {
     renameForm.addEventListener('submit', async function (event) {
@@ -573,7 +575,7 @@ if (modal && body) {
         const response = await fetch(action, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
-          body: JSON.stringify({ name: filenameInput.value })
+          body: JSON.stringify({ name: filenameInput.value + activeExtension })
         });
         const result = await response.json();
         if (!response.ok) throw new Error(result.error || 'Unable to rename media.');
@@ -586,7 +588,7 @@ if (modal && body) {
           label.title = result.name;
         }
         if (activePreview === preview) {
-          filenameInput.value = result.name;
+          filenameInput.value = activeExtension ? result.name.slice(0, -activeExtension.length) : result.name;
           if (title) title.textContent = result.name;
           const image = body.querySelector('img');
           if (image) image.alt = result.name;
@@ -625,7 +627,11 @@ if (modal && body) {
       const assetId = column && column.dataset.mediaId;
       renameForm.hidden = !assetId;
       renameForm.action = '/media-library/' + encodeURIComponent(assetId || '') + '/rename';
-      filenameInput.value = name;
+      const extensionIndex = name.lastIndexOf('.');
+      activeExtension = extensionIndex > 0 && extensionIndex < name.length - 1 ? name.slice(extensionIndex) : '';
+      filenameInput.value = activeExtension ? name.slice(0, extensionIndex) : name;
+      filenameInput.maxLength = Math.max(1, 255 - activeExtension.length);
+      if (extensionLabel) extensionLabel.textContent = activeExtension;
       filenameInput.disabled = false;
       renameSave.disabled = false;
       renameStatus.hidden = true;

src/web/views/settings/media-library/list.hbs

@@ -100,6 +100,7 @@
     <label for="media-gallery-filename" class="form-label">Filename</label>
     <div class="input-group">
       <input id="media-gallery-filename" name="name" type="text" class="form-control" maxlength="255" required data-media-gallery-filename />
+      <span class="input-group-text" data-media-gallery-extension aria-label="File extension"></span>
       <button type="submit" class="btn btn-primary" title="Save filename" data-media-gallery-rename-save><i class="bi bi-floppy" aria-hidden="true"></i><span class="visually-hidden">Save filename</span></button>
     </div>
     <p class="small mb-0 mt-2" role="status" data-media-gallery-rename-status hidden></p>