Page MenuHomePhabricator
Files F3389510

D8315.id28121.diff
No OneTemporary
Actions

D8315.id28121.diff
View Options

diff --git a/web/avatars/edit-user-avatar-menu.css b/web/avatars/edit-user-avatar-menu.css
--- 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
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -11,6 +11,7 @@
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 @@
),
[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 @@
[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;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 7:25 PM (20 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2602110
Default Alt Text
D8315.id28121.diff (1 KB)

Event Timeline