Docs
Cloud

Cloud

Upload images and attachments to the cloud.

☁️ 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...


Features

  • Image and attachment uploads, automatic server-side image resizing, and more.
  • Supports drag and drop, paste, and file picker uploads.
  • Automatic delivery of DPI-specific images.

Installation

npm install @udecode/plate-cloud

Usage

Get a free Portive API key.

To get the value to save to your database, use editor.cloud.getSaveValue(). This is required for Plate Cloud because of the asynchronous nature of uploads.

API

createCloudAttachmentPlugin

createCloudImagePlugin

Options

Collapse all

    The maximum initial width of the cloud image.

    The maximum initial height of the cloud image.

    The minimum width of the cloud image after resize.

    The maximum width of the cloud image after resize.

createCloudPlugin

Options

Collapse all

    Extends ClientOptions.

    The initial state of the upload store. Each record maps a string key to an upload object.

createUploadStore

State

Collapse all

    The lookup for origin files, where the keys are the IDs and the values are upload information.

finishUploads

Finds all the in-progress uploads and waits for them all to finish before resolving the returned promise.

Parameters

Collapse all

    The editor instance.

generateSrcAndSrcSet

Generates the src and srcSet attributes for an image.

Parameters

Collapse all

Returns

    An object containing the src and srcSet attributes.

getInProgressUploads

Takes an array of nodes and a lookup for origins and normalizes the nodes by replacing the id values with actual URLs for successfully uploaded files.

Parameters

Collapse all

    The array of nodes to be normalized.

    The lookup for origin files, where the keys are the IDs and the values are upload information.

getSaveValue

Normalizes the save value by replacing the id values with actual URLs for successfully uploaded files.

Parameters

Collapse all

    The save value to be normalized.

    The lookup for origin files, where the keys are the IDs and the values are upload information.

Returns

    The normalized save value with replaced id values.

onDropCloud

Handles the drop event of cloud files.

Parameters

Collapse all

    The editor instance.

    The drag event object.

Returns

    A boolean indicating whether the drop event was handled successfully.

onPasteCloud

Handles the paste event of cloud files.

Parameters

Collapse all

    The editor instance.

    The clipboard event object.

Returns

    A boolean indicating whether the paste event was handled successfully.

uploadFiles

Uploads a single file to the cloud.

Parameters

Collapse all

    The editor instance.

    The file to be uploaded.

CloudEditorProps

Attributes

Collapse all

    Object containing methods and properties related to cloud operations.

CloudImageEditorProps

Attributes

Collapse all

    Object containing the dimensions of the cloud image.

TCloudAttachmentElement

Parameters

Collapse all

    The URL of the cloud attachment.

    The filename of the cloud attachment.

    The size of the cloud attachment in bytes.

TCloudImageElement

Attributes

Collapse all

    The URL of the cloud image.

    The size of the image in bytes.

    The width of the cloud image.

    The height of the cloud image.

    The maximum width of the cloud image.

    The maximum height of the cloud image.

API Plugins

withCloud

A higher-order function that enhances a Plate editor with cloud-related functionality.

Parameters

Collapse all

    The Plate editor instance.

    The cloud plugin.

Returns

    The enhanced Plate editor instance with cloud functionality.

withCloudAttachment

A higher-order function that enhances a Plate Cloud editor with cloud attachment functionality.

Parameters

Collapse all

    The Plate editor instance.

    The cloud attachment plugin.

Returns

    The enhanced Plate Cloud editor instance with cloud attachment functionality.

withCloudImage

A higher-order function that enhances a Plate Cloud Image editor with cloud image functionality.

Parameters

Collapse all

    The Plate editor instance.

    The cloud image plugin.

Returns

    The enhanced Plate Cloud Image editor instance with cloud image functionality.

API Components

useCloudAttachmentElement

useCloudImageElement

useUpload

CaptionCollaboration