On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.

DraggableImage

API reference for the DraggableImage component.

The DraggableImage component has been deprecated. Instead, use the ImageCard(opens in a new tab or window) component.

Usage

import React from "react";
import { DraggableImage } from "components/draggable_image";
import { upload } from "@canva/asset";
export function App() {
return (
<DraggableImage
src="https://www.canva.dev/example-assets/image-import/thumbnail.jpg"
resolveImageRef={() => {
return upload({
type: "image",
mimeType: "image/jpeg",
url: "https://www.canva.dev/example-assets/image-import/image.jpg",
thumbnailUrl:
"https://www.canva.dev/example-assets/image-import/thumbnail.jpg",
aiDisclosure: "none",
});
}}
/>
);
}
TSX

Props

srcstring
REQUIRED

The URL or data URL of the image to embed in the app's user interface.

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

resolveImageReffunction
REQUIRED

A function that returns the result of the upload method.

fullSizeobject
OPTIONAL

The dimensions of the full-size image, in pixels.

fullSize.widthnumber
SOMETIMES REQUIRED

The width of the full-size image, in pixels.

fullSize.heightnumber
SOMETIMES REQUIRED

The height of the full-size image, in pixels.

previewSrcstring
OPTIONAL

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".

previewSizeobject
OPTIONAL

The dimensions of the drag preview, in pixels.

previewSize.widthnumber
SOMETIMES REQUIRED

The width of the drag preview, in pixels.

previewSize.heightnumber
SOMETIMES REQUIRED

The height of the drag preview, in pixels.