If you haven't already, create a new app in the Developer Portal⁠(opens in a new tab or window). For more information, refer to our Quickstart guide.
In your app's configuration on the Developer Portal⁠(opens in a new tab or window), ensure the "Development URL" is set to http://localhost:8080.

Clone the starter kit:

git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
cd canva-apps-sdk-starter-kit

SHELL

Install dependencies:
```
npm install
```
SHELL
Run the example:
```
npm run start drag_and_drop_image
```
SHELL
Click the Preview URL link shown in the terminal to open the example in the Canva editor.

Example app source code

// For usage information, see the README.md file.
import React from "react";
import { Rows, Text, Title, ImageCard } from "@canva/app-ui-kit";
import { upload } from "@canva/asset";
import type { ImageDragConfig } from "@canva/design";
import { ui } from "@canva/design";
/**
 * Static images are used here for demonstration purposes only.
 * In a real app, you should use a CDN/hosting service to host your images,
 * then upload them to Canva using the `upload` function from the `@canva/asset` package.
 */
/* eslint-disable-next-line no-restricted-imports */
import dog from "assets/images/dog.jpg";
import * as styles from "styles/components.css";
import { useFeatureSupport } from "utils/use_feature_support";
import { useAddElement } from "utils/use_add_element";

const uploadExternalImage = () => {
  return upload({
    mimeType: "image/jpeg",
    thumbnailUrl:
      "https://www.canva.dev/example-assets/image-import/grass-image-thumbnail.jpg",
    type: "image",
    url: "https://www.canva.dev/example-assets/image-import/grass-image.jpg",
    width: 320,
    height: 212,
    aiDisclosure: "none",
  });
};

const uploadLocalImage = () => {
  return upload({
    mimeType: "image/jpeg",
    thumbnailUrl: dog,
    type: "image",
    url: dog,
    width: 100,
    height: 100,
    aiDisclosure: "none",
  });
};

const altText = {
  text: "grass image",
  decorative: true,
};

export const App = () => {
  const isSupported = useFeatureSupport();
  const addElement = useAddElement();

  const insertLocalImage = async () => {
    const { ref } = await uploadLocalImage();
    await addElement({ type: "image", ref, altText });
  };

  const insertExternalImage = async () => {
    const { ref } = await uploadExternalImage();
    addElement({ type: "image", ref, altText });
  };

  const onDragStartForLocalImage = (event: React.DragEvent<HTMLElement>) => {
    const dragData: ImageDragConfig = {
      type: "image",
      resolveImageRef: uploadLocalImage,
      previewUrl: dog,
      previewSize: {
        width: 100,
        height: 100,
      },
      fullSize: {
        width: 100,
        height: 100,
      },
    };
    if (isSupported(ui.startDragToPoint)) {
      ui.startDragToPoint(event, dragData);
    } else if (isSupported(ui.startDragToCursor)) {
      ui.startDragToCursor(event, dragData);
    }
  };

  const onDragStartForExternalImage = (event: React.DragEvent<HTMLElement>) => {
    const dragData: ImageDragConfig = {
      type: "image",
      resolveImageRef: uploadExternalImage,
      previewUrl:
        "https://www.canva.dev/example-assets/image-import/grass-image-thumbnail.jpg",
      previewSize: {
        width: 320,
        height: 212,
      },
      fullSize: {
        width: 320,
        height: 212,
      },
    };

    if (isSupported(ui.startDragToPoint)) {
      ui.startDragToPoint(event, dragData);
    } else if (isSupported(ui.startDragToCursor)) {
      ui.startDragToCursor(event, dragData);
    }
  };

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="3u">
        <Text>
          This example demonstrates how apps can support drag-and-drop of
          images.
        </Text>
        <Rows spacing="1u">
          <Title size="small">Local image</Title>
          <Text size="small" tone="tertiary">
            This local image is made draggable via drag and drop and asset
            upload.
          </Text>
          <ImageCard
            ariaLabel="Add image to design"
            alt="dog image"
            thumbnailUrl={dog}
            onDragStart={onDragStartForLocalImage}
            onClick={insertLocalImage}
          />
        </Rows>
        <Rows spacing="1u">
          <Title size="small">External Image</Title>
          <Text size="small" tone="tertiary">
            This image is an external https image made draggable via drag and
            drop and asset upload.
          </Text>
          <ImageCard
            ariaLabel="Add image to design"
            alt="grass image"
            thumbnailUrl="https://www.canva.dev/example-assets/image-import/grass-image.jpg"
            onClick={insertExternalImage}
            onDragStart={onDragStartForExternalImage}
          />
        </Rows>
      </Rows>
    </div>
  );
};

TYPESCRIPT

import { AppUiProvider } from "@canva/app-ui-kit";
import { createRoot } from "react-dom/client";
import { App } from "./app";
import "@canva/app-ui-kit/styles.css";

const root = createRoot(document.getElementById("root") as Element);
function render() {
  root.render(
    <AppUiProvider>
      <App />
    </AppUiProvider>,
  );
}

render();

if (module.hot) {
  module.hot.accept("./app", render);
}

TYPESCRIPT

# Drag and drop image

Demonstrates how to implement drag-and-drop functionality for images using ImageCard and startDragToPoint. Shows both external URL and local asset handling with feature detection for different design contexts.

For API reference docs and instructions on running this example, see: https://www.canva.dev/docs/apps/examples/drag-and-drop-image/.

Related examples: See drag_and_drop/drag_and_drop_video for video drag-and-drop, or asset_upload for direct image import.

NOTE: This example differs from what is expected for public apps to pass a Canva review:

- Static assets are used for demonstration purposes only. Production apps should host assets on a CDN/hosting service and use the `upload` function from the `@canva/asset` package
- ESLint rule `no-restricted-imports` is disabled for example purposes only. Production apps should not disable linting rules without proper justification
- Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
- Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements

MARKDOWN

API Reference

Need Help?

Join our Community Forum⁠(opens in a new tab or window)
Report issues with this example on GitHub⁠(opens in a new tab or window)