fixed #33321

Author: kerwin612

templates/admin/user/edit.tmpl

@@ -196,7 +196,12 @@
 
 				<div class="inline field tw-pl-4">
 					<label for="avatar">{{ctx.Locale.Tr "settings.choose_new_avatar"}}</label>
-					<input name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+					<input id="new-avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp">
+				</div>
+
+				<div class="field tw-pl-4 cropper-panel tw-hidden">
+					<div>{{ctx.Locale.Tr "settings.cropper_prompt"}}</div>
+					<div class="cropper-wrapper"><img class="cropper-source" src alt></div>
 				</div>
 
 				<div class="field">

web_src/js/features/admin/common.ts

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import {checkAppUrl} from '../common-page.ts';
 import {hideElem, showElem, toggleElem} from '../../utils/dom.ts';
 import {POST} from '../../modules/fetch.ts';
+import {initCompCropper} from '../comp/Cropper.ts';
 
 const {appSubUrl} = window.config;
 
@@ -258,4 +259,12 @@ export function initAdminCommon(): void {
       window.location.href = this.getAttribute('data-redirect');
     });
   }
+
+  // Avatar Cropper
+  if (document.querySelector<HTMLDivElement>('.admin.edit.user')) {
+    const fileInput = document.querySelector<HTMLInputElement>('#new-avatar');
+    const container = document.querySelector<HTMLElement>('.admin.edit.user .cropper-panel');
+    const imageSource = container.querySelector<HTMLImageElement>('.cropper-source');
+    initCompCropper({container, fileInput, imageSource});
+  }
 }