Canva Developers logo
Drag and Drop
Getting started
Drag and Drop

DraggableImage

Renders an image that users can drag and drop into their design.

Import

import { DraggableImage } from "../components/DraggableImage";

Usage

Basic usage

<DraggableImage src="data:image/png;base64,R0lGODlhyAAiALM..." />

Customizing the drag data

<DraggableImage
  src="data:image/png;base64,R0lGODlhyAAiALM..."
  fullSizeSrc="data:image/png;base64,R0lGODlhyAAiALM..."
  fullSize={{
    width: 100,
    height: 100,
  }}
  previewSrc="data:image/png;base64,R0lGODlhyAAiALM..."
  previewSize={{
    width: 50,
    height: 50,
  }}
/>

Importing an image from a URL

<DraggableImage
  src="data:image/png;base64,R0lGODlhyAAiALM..."
  resolveImageRef={async () => {
    // Initialize the Content capability
    const content = getContent();


    // Queue the media upload
    const upload = await content.queueMediaUpload({
      type: "IMAGE",
      id: "8f43953d9f0517df981dc113b8a7640c",
      mimeType: "image/svg+xml",
      url: "https://www.canva.dev/example-assets/image-import/image.jpg",
      thumbnailUrl:
        "https://www.canva.dev/example-assets/image-import/thumbnail.jpg",
      width: 160,
      height: 22,
    });


    if (upload.type !== "done") {
      throw new Error(`Something went wrong!`);
    }


    return upload;
  }}
  fullSize={{
    width: 100,
    height: 100,
  }}
  previewSrc="data:image/png;base64,R0lGODlhyAAiALM..."
  previewSize={{
    width: 50,
    height: 50,
  }}
/>

Props

The props depend on how the component is expected to load the image data:

  • Data URL
  • External URL

When the image data is loaded from a data URL, the following props are accepted:

src

The URL or data URL of the image to embed in the app's user interface. By default, this is also the image that's added to the user's design at the end of a drag event.

This image must have a MIME type of image/jpeg or image/png.

Type
string
fullSizeSrc

The data URL of the full-size image. This is this image that's added to the user's design and uploaded to the user's account at the end of a drag event. If omitted, the image from the src prop is used.

This image must have a MIME type of image/jpeg or image/png.

Type
string
fullSize

The dimensions of the full-size image.

Type
object
fullSize.width

The width of the full-size image.

Type
number
fullSize.height

The height of the full-size image.

Type
number
previewSrc

The data URL of the image used in the drag preview. This is the image that appears under the user's cursor during the drag event. If omitted, the image from the src prop is used.

This image must have a MIME type of image/jpeg or image/png.

Type
string
previewSize

The dimensions of the drag preview.

Type
object
previewSize.width

The width of the drag preview.

Type
number
previewSize.height

The height of the drag preview.

Type
number