> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# Drag and drop video

Drag-and-drop functionality for video elements.

## Running this example

To run this example locally:

1. If you haven't already, create a new app in the [Developer Portal](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

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

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example drag_and_drop_video
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import React from "react";
    import { Rows, Text, Title, VideoCard } from "@canva/app-ui-kit";
    import { upload } from "@canva/asset";
    import type { VideoDragConfig } from "@canva/design";
    import { addElementAtCursor, addElementAtPoint, ui } from "@canva/design";
    import * as styles from "styles/components.css";
    import { useFeatureSupport } from "@canva/app-hooks";

    // Uploads a video asset to Canva using the upload API
    const uploadVideo = () => {
      return upload({
        mimeType: "video/mp4",
        // Thumbnail image shown when video is not playing
        thumbnailImageUrl:
          "https://www.canva.dev/example-assets/video-import/beach-thumbnail-image.jpg",
        // Preview video for hover states and drag operations
        thumbnailVideoUrl:
          "https://www.canva.dev/example-assets/video-import/beach-thumbnail-video.mp4",
        type: "video",
        url: "https://www.canva.dev/example-assets/video-import/beach-video.mp4",
        width: 320,
        height: 180,
        // AI disclosure indicates if content was AI-generated
        aiDisclosure: "none",
      });
    };

    const altText = {
      text: "beach video",
      decorative: true,
    };

    export const App = () => {
      const isSupported = useFeatureSupport();
      const addElement = [addElementAtPoint, addElementAtCursor].find((fn) =>
        isSupported(fn),
      );

      // Configuration for drag-and-drop behavior in Canva
      const dragData: VideoDragConfig = {
        type: "video",
        // Function that handles video upload when drag is completed
        resolveVideoRef: uploadVideo,
        // Size of the preview during drag operation
        previewSize: {
          width: 320,
          height: 180,
        },
        // Image shown during drag preview
        previewUrl:
          "https://www.canva.dev/example-assets/video-import/beach-thumbnail-image.jpg",
      };

      // Handles drag start with feature detection for drag API compatibility
      const onDragStart = (event: React.DragEvent<HTMLElement>) => {
        // Prefer startDragToPoint for better UX (drag follows cursor to specific point)
        if (isSupported(ui.startDragToPoint)) {
          ui.startDragToPoint(event, dragData);
        } else if (isSupported(ui.startDragToCursor)) {
          // Fallback to startDragToCursor (drag follows cursor movement)
          ui.startDragToCursor(event, dragData);
        }
      };

      // Alternative method to add video directly without drag-and-drop
      const insertVideo = async () => {
        if (!addElement) {
          return;
        }

        const { ref } = await uploadVideo();
        addElement({ type: "video", ref, altText });
      };

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="3u">
            <Text>
              This example demonstrates how apps can support drag-and-drop of
              videos.
            </Text>
            <Rows spacing="1u">
              <Title size="small">External video</Title>
              <Text size="small" tone="tertiary">
                This video is an external HTTPS video made draggable via drag and
                drop and asset upload.
              </Text>
              <VideoCard
                ariaLabel="Add video to design"
                thumbnailUrl="https://www.canva.dev/example-assets/video-import/beach-thumbnail-image.jpg"
                videoPreviewUrl="https://www.canva.dev/example-assets/video-import/beach-thumbnail-video.mp4"
                durationInSeconds={7}
                mimeType="video/mp4"
                onDragStart={onDragStart}
                onClick={insertVideo}
                disabled={!addElement}
              />
            </Rows>
          </Rows>
        </div>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { AppUiProvider } from "@canva/app-ui-kit";
    import { createRoot } from "react-dom/client";
    import { App } from "./app";
    import "@canva/app-ui-kit/styles.css";
    import type { DesignEditorIntent } from "@canva/intents/design";
    import { prepareDesignEditor } from "@canva/intents/design";

    async function render() {
      const root = createRoot(document.getElementById("root") as Element);

      root.render(
        <AppUiProvider>
          <App />
        </AppUiProvider>,
      );
    }

    const designEditor: DesignEditorIntent = { render };
    prepareDesignEditor(designEditor);

    // Hot Module Replacement for development (automatically reloads the app when changes are made)
    if (module.hot) {
      module.hot.accept("./app", render);
    }
    ```
  </Tab>

  <Tab name="README.md">
    ```markdown
    # Drag and drop video

    Demonstrates how to implement drag-and-drop functionality for video files using VideoCard and startDragToPoint. Shows video upload, thumbnail previews, and design integration with feature detection.

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

    Related examples: See drag_and_drop/drag_and_drop_image for image drag-and-drop, or asset_upload for direct video 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
    - Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
    - Video format validation and thumbnail generation is not implemented. Production apps should validate video formats and provide proper thumbnail generation
    - Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements
    - The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`addElementAtCursor`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-cursor/)
* [`addElementAtPoint`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-point/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)
* [`ui.startDragToCursor`](https://www.canva.dev/docs/apps/api/latest/design-ui-start-drag-to-cursor/)
* [`ui.startDragToPoint`](https://www.canva.dev/docs/apps/api/latest/design-ui-start-drag-to-point/)
* [`upload`](https://www.canva.dev/docs/apps/api/latest/asset-upload/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)