From ac80d4ee5dddff539e900e24b0ff719be5c139b0 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 5 Feb 2025 22:30:57 +0800
Subject: [PATCH] fix

---
 templates/shared/avatar_upload_crop.tmpl | 2 +-
 web_src/js/features/comp/Cropper.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/shared/avatar_upload_crop.tmpl b/templates/shared/avatar_upload_crop.tmpl
index 6f250cee33e3d..5c071b33a4d90 100644
--- a/templates/shared/avatar_upload_crop.tmpl
+++ b/templates/shared/avatar_upload_crop.tmpl
@@ -1,7 +1,7 @@
 {{- /* we do not need to set for/id here, global aria init code will add them automatically */ -}}
 <label>{{.LabelText}}</label>
 <input name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
-{{- /* the cropper-panel must be next sibling of the input "js-avatar-with-cropper" */ -}}
+{{- /* the cropper-panel must be next sibling of the input "avatar" */ -}}
 <div class="cropper-panel tw-hidden">
 	<div>{{ctx.Locale.Tr "settings.cropper_prompt"}}</div>
 	<div class="cropper-wrapper"><img class="cropper-source" src alt></div>
diff --git a/web_src/js/features/comp/Cropper.ts b/web_src/js/features/comp/Cropper.ts
index 9b23ada3a0e96..0a5f9b71c46b3 100644
--- a/web_src/js/features/comp/Cropper.ts
+++ b/web_src/js/features/comp/Cropper.ts
@@ -41,8 +41,8 @@ async function initCompCropper({container, fileInput, imageSource}: CropperOpts)
 
 export async function initAvatarUploaderWithCropper(fileInput?: HTMLInputElement) {
   if (!fileInput) return;
-  const panel = queryElemSiblings(fileInput, '.cropper-panel')[0] as HTMLElement;
-  if (!panel) return;
+  const panel = fileInput.nextElementSibling as HTMLElement;
+  if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader');
   const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source');
   await initCompCropper({container: panel, fileInput, imageSource});
 }