Media Placeholder Element

Renders a placeholder for various media types with upload functionality.

Media Block Context Menu Block Menu Block Menu Items Block Selection Button Color Dropdown Menu Dropdown Menu Input Menu Plate Element Popover Separator Spinner Tabs Toolbar Tooltip Turn Into Dropdown Menu

Installation

Install the following dependencies:

npm install @udecode/plate-media use-file-picker [email protected] @uploadthing/[email protected] sonner zod @udecode/plate-selection @udecode/plate-ai @udecode/plate-caption @udecode/plate-comments @udecode/plate-font @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-dropdown-menu @udecode/plate-block-quote @udecode/plate-callout @udecode/plate-code-block @udecode/plate-heading @udecode/plate-indent-list @udecode/plate-toggle @udecode/plate-date @udecode/plate-layout @udecode/plate-math @udecode/plate-table @ariakit/[email protected] @radix-ui/react-slot @radix-ui/react-popover @radix-ui/react-tabs

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Upload

Get the code ->

Media File Element Media Video Element