Asset options

Restrict which images and videos can be added to the canvas.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function AssetPropsExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				// only allow jpegs
				acceptedImageMimeTypes={['image/jpeg']}
				// don't allow any videos
				acceptedVideoMimeTypes={[]}
				// accept images of any dimension
				maxImageDimension={Infinity}
				// ...but only accept assets up to 1mb
				maxAssetSize={1 * 1024 * 1024}
			/>
		</div>
	)
}

The Tldraw component has props that control which assets it accepts when files are dropped, pasted, or uploaded:

  • acceptedImageMimeTypes and acceptedVideoMimeTypes filter by file type. Here only JPEGs are allowed and videos are turned off entirely.
  • maxAssetSize caps the file size in bytes (1 MB here).
  • maxImageDimension limits an image's width or height in pixels; larger images are scaled down on import. Infinity disables the limit.

Try dropping a PNG or a video onto the canvas: it is rejected with a toast. A JPEG under 1 MB is accepted.

Is this page helpful?
Prev
Camera options
Next
Custom text outline