Use file processor for user avatar

com.woltlab.wcf/fileDelete.xml

@@ -1681,6 +1681,7 @@
 		<file>lib/data/user/option/IUserOptionOutput.class.php</file>
 		<file>lib/data/user/option/UserOptionOutput.class.php</file>
 		<file>lib/form/AbstractSecureForm.class.php</file>
+		<file>lib/form/AvatarEditForm.class.php</file>
 		<file>lib/form/Form.class.php</file>
 		<file>lib/form/MailForm.class.php</file>
 		<file>lib/form/MultifactorAuthenticationAbortForm.class.php</file>
@@ -2999,6 +3000,8 @@
 		<file>lib/system/template/plugin/TemplatePluginPrefilterIcon.class.php</file>
 		<file>lib/system/template/plugin/TemplatePluginPrefilterLang.class.php</file>
 		<file>lib/system/template/plugin/WordwrapModifierTemplatePlugin.class.php</file>
+		<file>lib/system/upload/AvatarUploadFileSaveStrategy.class.php</file>
+		<file>lib/system/upload/AvatarUploadFileValidationStrategy.class.php</file>
 		<file>lib/system/user/UserCollapsibleContentHandler.class.php</file>
 		<file>lib/system/user/activity/point/AbstractUserActivityPointObjectProcessor.class.php</file>
 		<file>lib/system/user/activity/point/DefaultUserActivityPointObjectProcessor.class.php</file>

com.woltlab.wcf/objectType.xml

@@ -1744,6 +1744,11 @@
 			<definitionname>com.woltlab.wcf.file</definitionname>
 			<classname>wcf\system\file\processor\AttachmentFileProcessor</classname>
 		</type>
+		<type>
+			<name>com.woltlab.wcf.user.avatar</name>
+			<definitionname>com.woltlab.wcf.file</definitionname>
+			<classname>wcf\system\file\processor\UserAvatarFileProcessor</classname>
+		</type>
 		<!-- deprecated -->
 		<type>
 			<name>com.woltlab.wcf.page.controller</name>

com.woltlab.wcf/page.xml

@@ -100,20 +100,6 @@
 				<title>Benutzerkonto-Sicherheit</title>
 			</content>
 		</page>
-		<page identifier="com.woltlab.wcf.AvatarEdit">
-			<pageType>system</pageType>
-			<controller>wcf\form\AvatarEditForm</controller>
-			<name language="de">Avatar-Verwaltung</name>
-			<name language="en">Avatar Management</name>
-			<hasFixedParent>1</hasFixedParent>
-			<parent>com.woltlab.wcf.AccountManagement</parent>
-			<content language="en">
-				<title>Avatar Management</title>
-			</content>
-			<content language="de">
-				<title>Avatar-Verwaltung</title>
-			</content>
-		</page>
 		<page identifier="com.woltlab.wcf.EmailActivation">
 			<pageType>system</pageType>
 			<controller>wcf\form\EmailActivationForm</controller>
@@ -888,6 +874,7 @@ E-Mail: [E-Mail-Adresse der verantwortlichen Stelle]</p><p>Verantwortliche Stell
 		</page>
 	</import>
 	<delete>
+		<page identifier="com.woltlab.wcf.AvatarEdit"/>
 		<!-- The notification list is no longer part of the user menu. -->
 		<page identifier="com.woltlab.wcf.NotificationList"/>
 	</delete>

com.woltlab.wcf/templateDelete.xml

@@ -117,5 +117,6 @@
 		<template>__multilineItemListFormField</template>
 		<template>email_notification_userRegistration</template>
 		<template>imageViewer</template>
+		<template>avatarEdit</template>
 	</delete>
 </data>

com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl

@@ -24,6 +24,9 @@
 			'{unsafe:$field->getPrefixedId()|encodeJS}',
 			{if $field->isSingleFileUpload()}true{else}false{/if},
 			{if $field->isBigPreview()}true{else}false{/if},
+			{if $field->isSimpleReplace()}true{else}false{/if},
+			{if $field->isHideDeleteButton()}true{else}false{/if},
+			{if $field->getThumbnailSize() === null}undefined{else}'{$field->getThumbnailSize()|encodeJS}'{/if},
 			[{implode from=$actionButtons item=actionButton}{
 				title: '{unsafe:$actionButton['title']|encodeJS}',
 				icon: {if $actionButton['icon'] === null}undefined{else}'{unsafe:$actionButton['icon']->toHtml()|encodeJS}'{/if},

com.woltlab.wcf/templates/user.tpl

@@ -49,7 +49,7 @@
 					'wcf.user.activityPoint': '{jslang}wcf.user.activityPoint{/jslang}'
 				});
 			{/if}
-			
+
 			{if $user->canEdit() || ($__wcf->getUser()->userID == $user->userID && $user->canEditOwnProfile())}
 				WCF.Language.addObject({
 					'wcf.user.editProfile': '{jslang}wcf.user.editProfile{/jslang}'

com.woltlab.wcf/templates/userProfileHeader.tpl

@@ -39,6 +39,12 @@
 				</div>
 			{/if}
 
+			{if $view->user->canEditAvatar()}
+				<button type="button" data-edit-avatar="{link controller="UserAvatar" id=$view->user->userID}{/link}" class="button small">
+					{icon name='circle-user' type='solid'} {lang}wcf.user.avatar.edit{/lang}
+				</button>
+			{/if}
+
 			{if $view->canEditUser()}
 				<button type="button" class="jsButtonEditProfile button small">{icon name='pencil'} <span>{lang}wcf.user.editProfile{/lang}</span></button>
 			{/if}
@@ -51,7 +57,7 @@
 		<div class="userProfileHeader__avatar">
 			<div class="userProfileHeader__avatarBorder">
 				{if $view->user->userID == $__wcf->user->userID}
-					<a href="{link controller='AvatarEdit'}{/link}" class="userProfileHeader__avatarEditLink jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{unsafe:$view->user->getAvatar()->getImageTag(128)}</a>
+					<button type="button" data-edit-avatar="{link controller="UserAvatar" id=$view->user->userID}{/link}" class="userProfileHeader__avatarEditLink jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{unsafe:$view->user->getAvatar()->getImageTag(128)}</button>
 				{else}
 					{unsafe:$view->user->getAvatar()->getImageTag(128)}
 				{/if}

com.woltlab.wcf/userMenu.xml

@@ -16,11 +16,6 @@
 			<parent>wcf.user.menu.profile</parent>
 			<showorder>2</showorder>
 		</usermenuitem>
-		<usermenuitem name="wcf.user.menu.profile.avatar">
-			<controller>wcf\form\AvatarEditForm</controller>
-			<parent>wcf.user.menu.profile</parent>
-			<showorder>3</showorder>
-		</usermenuitem>
 		<usermenuitem name="wcf.user.menu.profile.signature">
 			<controller>wcf\form\SignatureEditForm</controller>
 			<parent>wcf.user.menu.profile</parent>
@@ -63,5 +58,6 @@
 	</import>
 	<delete>
 		<usermenuitem name="wcf.user.menu.community.notification"/>
+		<usermenuitem name="wcf.user.menu.profile.avatar"/>
 	</delete>
 </data>

ts/WoltLabSuite/Core/Bootstrap.ts

@@ -160,6 +160,10 @@ export function setup(options: BoostrapOptions): void {
   whenFirstSeen(".messageTabMenu", () => {
     void import("./Component/Message/MessageTabMenu").then(({ setup }) => setup());
   });
+  whenFirstSeen("[data-edit-avatar]", () => {
+    void import("./Component/User/Avatar").then(({ setup }) => setup());
+  });
+
   whenFirstSeen("woltlab-core-pagination", () => {
     void import("./Ui/Pagination/JumpToPage").then(({ setup }) => setup());
   });

ts/WoltLabSuite/Core/Component/File/Upload.ts

@@ -277,6 +277,8 @@ export function setup(): void {
             void upload(element, resizedFile);
           })
           .catch((e) => {
+            element.dispatchEvent(new CustomEvent("cancel"));
+
             if (e === undefined) {
               // User closed the dialog.
               return;

ts/WoltLabSuite/Core/Component/User/Avatar.ts

@@ -0,0 +1,50 @@
+/**
+ * Handles the user avatar edit buttons.
+ *
+ * @author    Olaf Braun
+ * @copyright 2001-2024 WoltLab GmbH
+ * @license   GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since     6.2
+ * @woltlabExcludeBundle all
+ */
+
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
+import { show as showNotification } from "WoltLabSuite/Core/Ui/Notification";
+
+interface Result {
+  avatar: string;
+}
+
+async function editAvatar(button: HTMLElement): Promise<void> {
+  const { ok, result } = await dialogFactory().usingFormBuilder().fromEndpoint<Result>(button.dataset.editAvatar!);
+
+  if (ok) {
+    const avatarForm = document.getElementById("avatarForm");
+    if (avatarForm) {
+      // In the ACP, the form should not be reloaded after changing the avatar.
+      avatarForm.querySelector<HTMLImageElement>("img.userAvatarImage")!.src = result.avatar;
+      showNotification();
+    } else {
+      window.location.reload();
+    }
+  }
+}
+
+export function setup(): void {
+  wheneverFirstSeen(
+    "#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file img",
+    (img: HTMLImageElement) => {
+      img.classList.add("userAvatarImage");
+      img.parentElement!.classList.add("userAvatar");
+    },
+  );
+
+  wheneverFirstSeen("[data-edit-avatar]", (button) => {
+    button.addEventListener(
+      "click",
+      promiseMutex(() => editAvatar(button)),
+    );
+  });
+}