[web] Add "file" input to imageMenuItem in EditUserAvatarMenu

Summary:
We add hidden `input` to `EditUserAvatarMenu`, and have browser file selection dialog appear when `imageMenuItem` is clicked.

For now we just log the selected file.

Initially we'll kick off image upload/avatar update as soon as an image is selected, but it will probably make sense to introduce some sort of `ImageSelectionModal` once the most basic flow is complete.

---

Depends on D8313

Test Plan: Logs selected file info as expected:

Reviewers: ashoat, ginsu, rohan

Reviewed By: ginsu

Subscribers: tomek

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

web/avatars/edit-user-avatar-menu.css

@@ -18,3 +18,7 @@
 .editAvatarBadge:hover {
   filter: brightness(0.8);
 }
+
+input[type='file'] {
+  display: none;
+}

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

@@ -11,6 +11,7 @@ import css from './edit-user-avatar-menu.css';
 import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
 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}>
@@ -47,10 +48,30 @@ function EditUserAvatarMenu(): React.Node {
     ),
     [openEmojiSelectionModal],
   );
-  const imageMenuItem = React.useMemo(
-    () => <MenuItem key="image" text="Select image" icon="image-1" />,
+
+  const imageInputRef = React.useRef();
+  const onImageMenuItemClicked = React.useCallback(
+    () => imageInputRef.current?.click(),
+    [],
+  );
+
+  const onImageSelected = React.useCallback(
+    event => console.log(event.target.files),
     [],
   );
+
+  const imageMenuItem = React.useMemo(
+    () => (
+      <MenuItem
+        key="image"
+        text="Select image"
+        icon="image-1"
+        onClick={onImageMenuItemClicked}
+      />
+    ),
+    [onImageMenuItemClicked],
+  );
+
   const removeMenuItem = React.useMemo(
     () => (
       <MenuItem
@@ -68,7 +89,17 @@ function EditUserAvatarMenu(): React.Node {
     [emojiMenuItem, imageMenuItem, removeMenuItem],
   );
 
-  return <Menu icon={editIcon}>{menuItems}</Menu>;
+  return (
+    <div>
+      <input
+        type="file"
+        onChange={onImageSelected}
+        ref={imageInputRef}
+        accept={allowedMimeTypeString}
+      />
+      <Menu icon={editIcon}>{menuItems}</Menu>
+    </div>
+  );
 }
 
 export default EditUserAvatarMenu;