Components
Cloud

Cloud

Integrate cloud functionality to enable seamless access to cloud-based resources.

Cloud

Installation

npx @udecode/plate-ui@latest add cloud

Examples

☁️ Plate Cloud Uploads - Images and Attachments

Plate Cloud is Plate's official cloud upload service with support for attachments, images and image resizing. Includes server-side image resizing which delivers optimized images to each user. Supports high DPI files for retina devices and smaller files for faster delivery for non-high DPI devices.
To upload a file, paste any file into this editor, or drag and drop the file into the editor. Images are automatically inserted as images and other files are inserted as attachments.

Resizing Images

Click an image and it will display a resize handle that you can drag to resize. Images are resized on the server saving bandwidth and improving download times for your users.

Local Setup

If you are running the examples locally, get a free Portive API Key from https://portive.com/, add a file at `/apps/www/.env.local` with one line in it like `PORTIVE_API_KEY=PRTV_xxxx_xxxx` substituting your API key for `PRTV_xxxx_xxxx`.

Cloud Images

Samples of cloud images in various upload states.




Upload Failed

Uploading...


Cloud Attachments

Samples of cloud attachments in various upload states.
hello.txt
8 bytes

hello.txt

hello.txt

hello.txt

hello.txt
1024 bytes

hello.txt
Upload Failed

hello.txt
Uploading...


Plugins

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createCloudPlugin({
      options: {},
    }),
    createCloudAttachmentPlugin(),
    createCloudImagePlugin({
      options: {
        maxInitialWidth: 320,
        maxInitialHeight: 320,
        minResizeWidth: 100,
        maxResizeWidth: 720,
      },
    }),
  ],
  {
    components: {
      ...plateUI,
      [ELEMENT_CLOUD_ATTACHMENT]: CloudAttachmentElement,
      [ELEMENT_CLOUD_IMAGE]: CloudImageElement,
    },
  }
);

Demo

export default function CloudDemo() {
  return (
    <Plate<MyValue> plugins={plugins} initialValue={cloudValue}>
      <FixedToolbar>
        <CloudToolbarButtons />
      </FixedToolbar>
      <Editor />
    </Plate>
  );
}