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

srcstringRequired

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

resolveImageReffunctionRequired

A function that returns the result of the upload method.

fullSizeobjectOptional

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.

previewSrcstringOptional

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

previewSizeobjectOptional

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.