diff --git a/web/avatars/edit-user-avatar-menu.css b/web/avatars/edit-user-avatar-menu.css
index 1676d4ebf..30938ff2f 100644
--- a/web/avatars/edit-user-avatar-menu.css
+++ b/web/avatars/edit-user-avatar-menu.css
@@ -1,20 +1,24 @@
 .editAvatarBadge {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   bottom: 0;
   right: 0;
   width: 34px;
   height: 34px;
   color: var(--fg);
   background-color: var(--edit-avatar-button);
   border: 2px solid var(--bg);
   border-radius: 50%;
   cursor: pointer;
   transition-duration: 200ms;
 }
 
 .editAvatarBadge:hover {
   filter: brightness(0.8);
 }
+
+input[type='file'] {
+  display: none;
+}
diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js
index 16a655a7a..c71e71220 100644
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -1,74 +1,105 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
 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}>
     <SWMansionIcon icon="edit-2" size={20} />
   </div>
 );
 
 function EditUserAvatarMenu(): React.Node {
   const editUserAvatarContext = React.useContext(EditUserAvatarContext);
   invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
 
   const { setUserAvatar } = editUserAvatarContext;
 
   const removeUserAvatar = React.useCallback(
     () => setUserAvatar({ type: 'remove' }),
     [setUserAvatar],
   );
 
   const { pushModal } = useModalContext();
 
   const openEmojiSelectionModal = React.useCallback(
     () => pushModal(<EmojiAvatarSelectionModal />),
     [pushModal],
   );
 
   const emojiMenuItem = React.useMemo(
     () => (
       <MenuItem
         key="emoji"
         text="Select emoji"
         icon="emote-smile"
         onClick={openEmojiSelectionModal}
       />
     ),
     [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
         key="remove"
         text="Reset to default"
         icon="trash-2"
         onClick={removeUserAvatar}
       />
     ),
     [removeUserAvatar],
   );
 
   const menuItems = React.useMemo(
     () => [emojiMenuItem, imageMenuItem, removeMenuItem],
     [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;