diff --git a/web/avatars/edit-user-avatar-menu.css b/web/avatars/edit-user-avatar-menu.css index 1676d4ebff..30938ff2f3 100644 --- a/web/avatars/edit-user-avatar-menu.css +++ b/web/avatars/edit-user-avatar-menu.css @@ -18,3 +18,7 @@ .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 16a655a7ac..c71e71220d 100644 --- a/web/avatars/edit-user-avatar-menu.react.js +++ b/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 = (
@@ -47,10 +48,30 @@ function EditUserAvatarMenu(): React.Node { ), [openEmojiSelectionModal], ); - const imageMenuItem = React.useMemo( - () => , + + 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( + () => ( + + ), + [onImageMenuItemClicked], + ); + const removeMenuItem = React.useMemo( () => ( {menuItems}; + return ( +
+ + {menuItems} +
+ ); } export default EditUserAvatarMenu;