#help with FileButton

8 messages · Page 1 of 1 (latest)

hazy coral
#

hello,
i have this piece code over here:

import { useUploadAvatar } from '@lib/hooks';
import { Menu, Button, FileButton, Text } from '@mantine/core';
import { IMAGE_MIME_TYPE } from '@mantine/dropzone';

const ChangeAvatarMenu = ({ reset }: { reset: boolean }) => {
    const { loading, uploadAvatar } = useUploadAvatar();

    return (
        <div style={{ position: 'absolute', bottom: -10 }}>
            <Menu withArrow position="bottom-start">
                <Menu.Target>
                    <Button variant="default" size="xs">
                        Edit
                    </Button>
                </Menu.Target>
                <Menu.Dropdown>
                    <Menu.Item>
                        <FileButton
                            onChange={(file) => {
                                console.log('hello');
                                console.log(file);
                                uploadAvatar(file!);
                            }}
                            accept={`${IMAGE_MIME_TYPE.join(',')}`}
                        >
                            {(props) => <Text {...props}>Upload a photo</Text>}
                        </FileButton>
                    </Menu.Item>
                    {reset && (
                        <Menu.Item>
                            <Text size="sm">Reset to default</Text>
                        </Menu.Item>
                    )}
                </Menu.Dropdown>
            </Menu>
        </div>
    );
};

export default ChangeAvatarMenu;

im not sure why nothing is being logged in the console when i try to select a file.
any suggestion?

#

here is the codesandbox

merry lagoon
#

i have the same issue!

slim cypress
#

@merry lagoon - Did you find out why this happens?

#

@storm lava - do you happen to know how we can have a functional FileButton inside a Menu? It doesn't seem to trigger onChange of my FileButton when I select a file...

#

I tried this as well:

{/* <FileButton
            accept="image/jpeg,image/png,image/webp"
            resetRef={resetRef}
            onChange={handleFileSelect}
          >
            {(props) => (
              <Menu.Item } {...props}>
                Change picture
              </Menu.Item>
            )}
          </FileButton> */}
storm lava