MediaUpload component is not displayed in the theme settings page

[weweloo]

I’m developing a WordPress theme settings page using React and there is a file upload function in this page. But the upload button cannot be displayed in the page, and there is no error reported by checking the console. But if I import this component into the Gutenberg editor, the component can be displayed normally.

import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";

export const MyMediaUploader = () => {
    const onFileSelect = ( x ) => {
        console.log( x );
    };
    return (
        <>
            <div>upload</div>
            <MediaUploadCheck>
                <MediaUpload
                    onSelect={ onFileSelect }
                    allowedTypes={ [ 'image' ] }
                    value={ 1 }
                    render={ ( { open } ) => {
                        return <button onClick={ open }>Choose image</button>;
                    } }
                />
            </MediaUploadCheck>
        </>
    );
};

I use MediaPlaceholder component in this setting page, I am prompted that I do not have permission to upload files. But I'm logged in with my admin account. My theme setting page is implemented using the rest api.

[devfle]

Hey, do you have Wordpress store access on your settings page? The component checks on useSelect if you have got permission, maybe this could be an issue?

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/media-upload/check.js#L12

you can easily test this by calling wp.data.select('core/block-editor') on your theme settings page.

Why not using also the rest api to upload new images?