Fix broken image when editing comment with non-image attachments (go-gitea#32319) (go-gitea#32345)

Backport go-gitea#32319 

Fix go-gitea#32316

---------

Co-authored-by: yp05327 <[email protected]>

Author: lunny

web_src/js/features/repo-issue-edit.js

@@ -4,6 +4,7 @@ import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkd
 import {createDropzone} from './dropzone.js';
 import {GET, POST} from '../modules/fetch.js';
 import {hideElem, showElem} from '../utils/dom.js';
+import {isImageFile} from '../utils/image.js';
 import {attachRefIssueContextPopup} from './contextpopup.js';
 import {initCommentContent, initMarkupContent} from '../markup/content.js';
 
@@ -84,10 +85,12 @@ async function onEditContent(event) {
             for (const attachment of data) {
               const imgSrc = `${dropzone.getAttribute('data-link-url')}/${attachment.uuid}`;
               dz.emit('addedfile', attachment);
-              dz.emit('thumbnail', attachment, imgSrc);
+              if (isImageFile(attachment.name)) {
+                dz.emit('thumbnail', attachment, imgSrc);
+                dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%';
+              }
               dz.emit('complete', attachment);
               fileUuidDict[attachment.uuid] = {submitted: true};
-              dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%';
               const input = document.createElement('input');
               input.id = attachment.uuid;
               input.name = 'files';

web_src/js/utils/image.js

@@ -45,3 +45,7 @@ export async function imageInfo(blob) {
 
   return {width, dppx};
 }
+
+export function isImageFile(name) {
+  return /\.(jpe?g|png|gif|webp|svg|heic)$/i.test(name);
+}