[web] Add image avatar support to EditThreadAvatarMenu

Summary:
Allows setting of image avatars on `web`.

---

Depends on D8840

Test Plan:
Works as expected:

{F692194}

Reviewers: ashoat, ginsu

Reviewed By: ginsu

Subscribers: ted, tomek

Differential Revision: https://phab.comm.dev/D8841

web/avatars/edit-thread-avatar-menu.react.js

@@ -7,9 +7,11 @@ import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
 
+import { useUploadAvatarMedia } from './avatar-hooks.react.js';
 import css from './edit-avatar-menu.css';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
+import { allowedMimeTypeString } from '../media/file-utils.js';
 
 const editIcon = (
   <div className={css.editAvatarBadge}>
@@ -45,10 +47,52 @@ function EditThreadAvatarMenu(props: Props): React.Node {
     [removeThreadAvatar],
   );
 
-  const menuItems = React.useMemo(() => [removeMenuItem], [removeMenuItem]);
+  const imageInputRef = React.useRef();
+  const onImageMenuItemClicked = React.useCallback(
+    () => imageInputRef.current?.click(),
+    [],
+  );
+
+  const uploadAvatarMedia = useUploadAvatarMedia();
+  const onImageSelected = React.useCallback(
+    async event => {
+      const uploadResult = await uploadAvatarMedia(event.target.files[0]);
+      baseSetThreadAvatar(threadInfo.id, {
+        type: 'image',
+        uploadID: uploadResult.id,
+      });
+    },
+    [baseSetThreadAvatar, threadInfo.id, uploadAvatarMedia],
+  );
+
+  const imageMenuItem = React.useMemo(
+    () => (
+      <MenuItem
+        key="image"
+        text="Select image"
+        icon="image-1"
+        onClick={onImageMenuItemClicked}
+      />
+    ),
+    [onImageMenuItemClicked],
+  );
+
+  const menuItems = React.useMemo(() => {
+    const items = [imageMenuItem];
+    if (threadInfo.avatar) {
+      items.push(removeMenuItem);
+    }
+    return items;
+  }, [imageMenuItem, removeMenuItem, threadInfo.avatar]);
 
   return (
     <div>
+      <input
+        type="file"
+        onChange={onImageSelected}
+        ref={imageInputRef}
+        accept={allowedMimeTypeString}
+      />
       <Menu icon={editIcon}>{menuItems}</Menu>
     </div>
   );