Shape that accepts dropped files

A custom shape with its own drop zone that shows an image dropped onto it.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import { DropZoneShapeUtil } from './drop-zone-shape-util'
import './drop-zone-shape.css'

// There's a guide at the bottom of this file!

// [1]
const customShapeUtils = [DropZoneShapeUtil]

export default function DropZoneShapeExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				shapeUtils={customShapeUtils}
				onMount={(editor) => {
					editor.createShape({ type: 'drop-zone', x: 100, y: 100 })
				}}
			/>
		</div>
	)
}

/*
[1]
The shape util array is defined outside the component so it keeps the same identity across
renders. See drop-zone-shape-util.tsx for the shape itself, which shows how to let a shape
accept dropped files instead of the canvas.
*/

Dropping a file onto the canvas normally creates an image or video shape. A shape can claim drops for itself instead: set pointer-events: all on its HTMLContainer, then handle React's onDragOver and onDrop on the element and call stopPropagation() so the canvas doesn't also handle the file.

Try dragging an image file from your desktop onto the dashed box. The image is kept in memory only, so it's not persisted or synced; a real app would upload the file and store a URL in the shape's props. See drop-zone-shape-util.tsx for the shape.

Is this page helpful?
Prev
Frame layout modes
Next
Stamp tool