From a3b7b98336262ce4bbcc31fb0ee5ed0cedb04c6a Mon Sep 17 00:00:00 2001
From: Lunny Xiao <xiaolunwen@gmail.com>
Date: Fri, 1 Nov 2024 22:34:09 -0700
Subject: [PATCH] Fix broken image when editing comment with non-image
 attachments (#32319) (#32345)

Backport #32319

Fix #32316

---------

Co-authored-by: yp05327 <576951401@qq.com>
---
 web_src/js/features/repo-issue-edit.js | 7 +++++--
 web_src/js/utils/image.js              | 4 ++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web_src/js/features/repo-issue-edit.js b/web_src/js/features/repo-issue-edit.js
index 919daa9c503..5396a51788d 100644
--- a/web_src/js/features/repo-issue-edit.js
+++ b/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';
diff --git a/web_src/js/utils/image.js b/web_src/js/utils/image.js
index ed5d98e35ad..3333ad3e541 100644
--- a/web_src/js/utils/image.js
+++ b/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);
+}