diff --git a/templates/repo/issue/view_content/attachments.tmpl b/templates/repo/issue/view_content/attachments.tmpl
index 12037768742f4..eaedeb06cf3f5 100644
--- a/templates/repo/issue/view_content/attachments.tmpl
+++ b/templates/repo/issue/view_content/attachments.tmpl
@@ -1,6 +1,6 @@
 <div class="dropzone-attachments">
 	{{if .Attachments}}
-		<div class="ui clearing divider"></div>
+		<div class="ui divider"></div>
 	{{end}}
 	{{$hasThumbnails := false}}
 	{{- range .Attachments -}}
diff --git a/web_src/css/features/dropzone.css b/web_src/css/features/dropzone.css
index c33f1ae536c3d..0ce067ef30ec7 100644
--- a/web_src/css/features/dropzone.css
+++ b/web_src/css/features/dropzone.css
@@ -51,8 +51,3 @@
 .dropzone .dz-preview:hover .dz-image img {
   filter: opacity(0.5) !important;
 }
-
-.dropzone-attachments .grid,
-.dropzone-attachments .thumbnails {
-  padding: .5rem 1rem;
-}
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 6bb1a67ee6093..9fda1088135cd 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -333,20 +333,19 @@ async function onEditContent(event) {
     let dz;
     const $dropzone = $editContentZone.find('.dropzone');
     if ($dropzone.length === 1) {
-      $dropzone.data('saved', false);
-
-      const fileUuidDict = {};
-      dz = await createDropzone($dropzone[0], {
-        url: $dropzone.data('upload-url'),
+      let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
+      let fileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
+      const dz = await createDropzone($dropzone[0], {
+        url: $dropzone.attr('data-upload-url'),
         headers: {'X-Csrf-Token': csrfToken},
-        maxFiles: $dropzone.data('max-file'),
-        maxFilesize: $dropzone.data('max-size'),
-        acceptedFiles: (['*/*', ''].includes($dropzone.data('accepts'))) ? null : $dropzone.data('accepts'),
+        maxFiles: $dropzone.attr('data-max-file'),
+        maxFilesize: $dropzone.attr('data-max-size'),
+        acceptedFiles: (['*/*', ''].includes($dropzone.attr('data-accepts'))) ? null : $dropzone.attr('data-accepts'),
         addRemoveLinks: true,
-        dictDefaultMessage: $dropzone.data('default-message'),
-        dictInvalidFileType: $dropzone.data('invalid-input-type'),
-        dictFileTooBig: $dropzone.data('file-too-big'),
-        dictRemoveFile: $dropzone.data('remove-file'),
+        dictDefaultMessage: $dropzone.attr('data-default-message'),
+        dictInvalidFileType: $dropzone.attr('data-invalid-input-type'),
+        dictFileTooBig: $dropzone.attr('data-file-too-big'),
+        dictRemoveFile: $dropzone.attr('data-remove-file'),
         timeout: 0,
         thumbnailMethod: 'contain',
         thumbnailWidth: 480,
@@ -359,9 +358,10 @@ async function onEditContent(event) {
             $dropzone.find('.files').append(input);
           });
           this.on('removedfile', (file) => {
+            if (disableRemovedfileEvent) return;
             $(`#${file.uuid}`).remove();
-            if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) {
-              $.post($dropzone.data('remove-url'), {
+            if ($dropzone.attr('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
+              $.post($dropzone.attr('data-remove-url'), {
                 file: file.uuid,
                 _csrf: csrfToken,
               });
@@ -373,20 +373,25 @@ async function onEditContent(event) {
             });
           });
           this.on('reload', () => {
-            $.getJSON($editContentZone.data('attachment-url'), (data) => {
+            $.getJSON($editContentZone.attr('data-attachment-url'), (data) => {
+              // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
+              disableRemovedfileEvent = true;
               dz.removeAllFiles(true);
               $dropzone.find('.files').empty();
-              $.each(data, function () {
-                const imgSrc = `${$dropzone.data('link-url')}/${this.uuid}`;
-                dz.emit('addedfile', this);
-                dz.emit('thumbnail', this, imgSrc);
-                dz.emit('complete', this);
-                dz.files.push(this);
-                fileUuidDict[this.uuid] = {submitted: true};
+              fileUuidDict = {};
+              disableRemovedfileEvent = false;
+
+              for (const attachment of data) {
+                const imgSrc = `${$dropzone.attr('data-link-url')}/${attachment.uuid}`;
+                dz.emit('addedfile', attachment);
+                dz.emit('thumbnail', attachment, imgSrc);
+                dz.emit('complete', attachment);
+                dz.files.push(attachment);
+                fileUuidDict[attachment.uuid] = {submitted: true};
                 $dropzone.find(`img[src='${imgSrc}']`).css('max-width', '100%');
-                const input = $(`<input id="${this.uuid}" name="files" type="hidden">`).val(this.uuid);
+                const input = $(`<input id="${attachment.uuid}" name="files" type="hidden">`).val(attachment.uuid);
                 $dropzone.find('.files').append(input);
-              });
+              }
             });
           });
         },