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;