useImageImport

useImageImport handles image uploads (file picker and drag-and-drop) and places imported images on the canvas.

Signature

function useImageImport(boardId: string): UseImageImportResult;

Return Type

interface UseImageImportResult {
    importImage: (file: File) => Promise<void>;
    importFromUrl: (url: string) => Promise<void>;
    isDragging: boolean;
    isUploading: boolean;
}

Property	Description
`importImage`	Upload a `File` to the asset endpoint and place it on the canvas
`importFromUrl`	Place an image from a URL directly (no upload)
`isDragging`	`true` when a file is being dragged over the window
`isUploading`	`true` while an upload is in progress

Usage

import { useImageImport } from '@hfu.digital/boardkit-react';

function ImageUploadButton({ boardId }: { boardId: string }) {
    const { importImage, isUploading } = useImageImport(boardId);

    const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        if (file) importImage(file);
    };

    return (
        <div>
            <input type="file" accept="image/*" onChange={handleFileSelect} disabled={isUploading} />
            {isUploading && <span>Uploading...</span>}
        </div>
    );
}

Drag-and-Drop

The hook automatically registers global drag-and-drop listeners on mount. When an image file is dropped anywhere on the page, it is uploaded and placed on the canvas.

import { useImageImport } from '@hfu.digital/boardkit-react';

function DropIndicator({ boardId }: { boardId: string }) {
    const { isDragging } = useImageImport(boardId);

    if (!isDragging) return null;

    return (
        <div style={{
            position: 'fixed',
            inset: 0,
            backgroundColor: 'rgba(0, 0, 255, 0.1)',
            border: '2px dashed blue',
            pointerEvents: 'none',
        }}>
            <p>Drop image to add to board</p>
        </div>
    );
}

Image Placement

Images are placed at the center of the current viewport
Large images are scaled down to a maximum dimension of 800px while preserving aspect ratio
The image element is created as an ImageElement with the uploaded asset's ID and URL