TLAssetStore • tldraw Docs

Table of contents

Methods
- resolve
- upload

A TLAssetStore sits alongside the main TLStore and is responsible for storing and retrieving large assets such as images. Generally, this should be part of a wider sync system:

By default, the store is in-memory only, so TLAssetStore converts images to data URLs
When using persistenceKey, the store is synced to the browser's local IndexedDB, so TLAssetStore stores images there too
When using a multiplayer sync server, you would implement TLAssetStore to upload images to e.g. an S3 bucket.

interface TLAssetStore {}

Methods

resolve

optional

Resolve an asset to a URL. This is used when rendering the asset in the editor. By default, this will just use asset.props.src, the URL returned by upload(). This can be used to rewrite that URL to add access credentials, or optimized the asset for how it's currently being displayed using the information provided.

Parameters

Name	Description
`asset`	`TLAsset` the asset being resolved
`ctx`	`TLAssetContext` information about the current environment and where the asset is being used

Returns

null | Promise<null | string> | string

The URL of the resolved asset, or null if the asset is not available

upload

Upload an asset to your storage, returning a URL that can be used to refer to the asset long-term.

Parameters

Name	Description
`asset`	`TLAsset` Information & metadata about the asset being uploaded
`file`	`File` The `File` to be uploaded
`abortSignal`	`AbortSignal`

Returns

Promise<{
  meta?: JsonObject
  src: string
}>

A promise that resolves to the URL of the uploaded asset