Fix wrong attachment removal (#16915) (#16917)

Backport #16917

web_src/js/index.js

@@ -1030,7 +1030,7 @@ async function initRepository() {
         if ($dropzone.length === 1) {
           $dropzone.data('saved', false);
 
-          const filenameDict = {};
+          const fileUuidDict = {};
           dz = await createDropzone($dropzone[0], {
             url: $dropzone.data('upload-url'),
             headers: {'X-Csrf-Token': csrf},
@@ -1048,28 +1048,24 @@ async function initRepository() {
             thumbnailHeight: 480,
             init() {
               this.on('success', (file, data) => {
-                filenameDict[file.name] = {
-                  uuid: data.uuid,
+                fileUuidDict[file.uuid] = {
                   submitted: false
                 };
                 const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
                 $dropzone.find('.files').append(input);
               });
               this.on('removedfile', (file) => {
-                if (!(file.name in filenameDict)) {
-                  return;
-                }
-                $(`#${filenameDict[file.name].uuid}`).remove();
-                if ($dropzone.data('remove-url') && !filenameDict[file.name].submitted) {
+                $(`#${file.uuid}`).remove();
+                if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) {
                   $.post($dropzone.data('remove-url'), {
-                    file: filenameDict[file.name].uuid,
+                    file: file.uuid,
                     _csrf: csrf,
                   });
                 }
               });
               this.on('submit', () => {
-                $.each(filenameDict, (name) => {
-                  filenameDict[name].submitted = true;
+                $.each(fileUuidDict, (fileUuid) => {
+                  fileUuidDict[fileUuid].submitted = true;
                 });
               });
               this.on('reload', () => {
@@ -1082,9 +1078,8 @@ async function initRepository() {
                     dz.emit('thumbnail', this, imgSrc);
                     dz.emit('complete', this);
                     dz.files.push(this);
-                    filenameDict[this.name] = {
+                    fileUuidDict[this.uuid] = {
                       submitted: true,
-                      uuid: this.uuid
                     };
                     $dropzone.find(`img[src='${imgSrc}']`).css('max-width', '100%');
                     const input = $(`<input id="${this.uuid}" name="files" type="hidden">`).val(this.uuid);
@@ -2674,7 +2669,6 @@ $(document).ready(async () => {
 
   // Dropzone
   for (const el of document.querySelectorAll('.dropzone')) {
-    const filenameDict = {};
     const $dropzone = $(el);
     await createDropzone(el, {
       url: $dropzone.data('upload-url'),
@@ -2692,18 +2686,15 @@ $(document).ready(async () => {
       thumbnailWidth: 480,
       thumbnailHeight: 480,
       init() {
-        this.on('success', (file, data) => {
-          filenameDict[file.name] = data.uuid;
+        this.on('success', (_file, data) => {
           const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
           $dropzone.find('.files').append(input);
         });
         this.on('removedfile', (file) => {
-          if (file.name in filenameDict) {
-            $(`#${filenameDict[file.name]}`).remove();
-          }
+          $(`#${file.uuid}`).remove();
           if ($dropzone.data('remove-url')) {
             $.post($dropzone.data('remove-url'), {
-              file: filenameDict[file.name],
+              file: file.uuid,
               _csrf: csrf
             });
           }