Media Placeholder

A placeholder for media upload with progress indication.

Media Placeholder ElementMedia Upload Toast
Loading...

Features

  • Supports multiple media types: image, video, audio, and file
  • Transforms for inserting different types of media placeholders

Installation

npm install @udecode/plate-media

Usage

import {
  AudioPlugin,
  FilePlugin,
  ImagePlugin,
  MediaEmbedPlugin,
  PlaceholderPlugin,
  VideoPlugin,
} from '@udecode/plate-media/react';
const plugins = [
  // ...otherPlugins,
  PlaceholderPlugin.configure({
    options: {
      disableEmptyPlaceholder: true,
    },
    render: {
      afterEditable: () => <MediaUploadToast />,
    },
  }),
];
const components = {
  // ...otherComponents,
  [PlaceholderPlugin.key]: MediaPlaceholderElement,
};

UploadThing Integration

The UploadThing integration provides an easy way to handle file uploads in your editor. Follow these steps to set it up:

  1. Install the required dependencies:

    npm install @uploadthing/react uploadthing

  2. Install the media-placeholder-element component.

  3. Set up the UploadThing API route by copying the example implementation.

  4. Get your UploadThing API key from the dashboard and add it to your .env file:

    UPLOADTHING_SECRET=your_secret_key

Using your own backend

To implement your own backend for file uploads:

  1. Remove the UploadThing implementation:

    lib/uploadthing/
api/uploadthing/

  2. Create your own upload hook:

    function useUploadFile() {
  // Your implementation here
  return {
    isUploading: boolean,
    progress: number,
    uploadFile: (file: File) => Promise<UploadedFile>,
    uploadedFile: UploadedFile | undefined,
    uploadingFile: File | undefined,
  };
}

  3. The hook should match the interface expected by the media placeholder component:

    interface UploadedFile {
  key: string;
  url: string;
  name: string;
  size: number;
  type: string;
}

Plate UI

Refer to the preview above.

Plate Plus

Get the code ->

Plugins

PlaceholderPlugin

Media placeholder element plugin.

Options

Collapse all

    Configuration for different file types:

    • You can use this option to configure upload limits for each file type, including:

      • Maximum file count (e.g. maxFileCount: 1)
      • Maximum file size (e.g. maxFileSize: '8MB')
      • Minimum file count (e.g. minFileCount: 1)
      • mediaType: Used for passing to the media-placeholder-elements file to distinguish between different file types and their progress bar styles.

      default configuration:

        uploadConfig: {
    audio: {
      maxFileCount: 1,
      maxFileSize: '8MB',
      mediaType: AudioPlugin.key,
      minFileCount: 1,
    },
    blob: {
      maxFileCount: 1,
      maxFileSize: '8MB',
      mediaType: FilePlugin.key,
      minFileCount: 1,
    },
    image: {
      maxFileCount: 3,
      maxFileSize: '4MB',
      mediaType: ImagePlugin.key,
      minFileCount: 1,
    },
    pdf: {
      maxFileCount: 1,
      maxFileSize: '4MB',
      mediaType: FilePlugin.key,
      minFileCount: 1,
    },
    text: {
      maxFileCount: 1,
      maxFileSize: '64KB',
      mediaType: FilePlugin.key,
      minFileCount: 1,
    },
    video: {
      maxFileCount: 1,
      maxFileSize: '16MB',
      mediaType: VideoPlugin.key,
      minFileCount: 1,
    },
  },

      here is all allowed file types (keys for uploadConfig):

      export const ALLOWED_FILE_TYPES = [
  'image',
  'video',
  'audio',
  'pdf',
  'text',
  'blob',
] as const;

    Disable empty placeholder when no file is selected.

    • Default: false

    Whether we can undo to the placeholder after the file upload is complete.

    • Default: false

    Maximum number of files that can be uploaded at once.

    • Default: 5

Transforms

editor.tf.insert.audioPlaceholder

Inserts an audio placeholder element.

Parameters

Collapse all

    Options for the insert nodes transform.

editor.tf.insert.filePlaceholder

Inserts a file placeholder element.

Parameters

Collapse all

    Options for the insert nodes transform.

editor.tf.insert.imagePlaceholder

Inserts an image placeholder element.

Parameters

Collapse all

    Options for the insert nodes transform.

editor.tf.insert.videoPlaceholder

Inserts a video placeholder element.

Parameters

Collapse all

    Options for the insert nodes transform.

Types

TPlaceholderElement

type TPlaceholderElement = TElement & {
  mediaType: string;
};
EquationSlash Command