[Bug]: Hosted images not rendering

[engin-can]

Hi,

I noticed uploaded images (hosted) are not rendered on https://tldraw.dev/examples/data/assets/hosted-images.
I tried similar code (see below) in my app and I am having the same problem.
Any idea why?

const Whiteboard = () => {
  const handleMount = useCallback((editor: Editor) => {
    editor.registerExternalAssetHandler("file", async ({ file }) => {
      try {
        const formData = new FormData();
        formData.append("file", file);

        const response = await makeAPICall("post", "/api/media/", formData, {
          "Content-Type": "multipart/form-data",
        });

        const finalUrl = response.file

        const assetId: TLAssetId = AssetRecordType.createId(
          getHashForString(finalUrl)
        );

        const shapeType = file.type.startsWith("image") ? "image" : "video";
        const size = await (shapeType === "image"
          ? MediaHelpers.getImageSize(file)
          : MediaHelpers.getVideoSize(file));

        const asset: TLAsset = AssetRecordType.create({
          id: assetId,
          type: shapeType,
          typeName: "asset",
          props: {
            name: file.name,
            src: finalUrl,
            w: size.w,
            h: size.h,
            mimeType: file.type,
            isAnimated: false,
          },
        });

        editor.createAssets([asset]);

        editor.createShape({
          type: shapeType,
          x: 100,
          y: 100,
          props: {
            assetId,
            w: size.w,
            h: size.h,
          },
        });

        return asset;
      } catch (error) {
        console.error("Upload failed:", error);
        throw new Error("Failed!");
      }
    });
  }, []);

  return <Tldraw onMount={handleMount} />;
};

export default Whiteboard;

How can we reproduce the bug?

By uploading an image

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

[linear]

TLD-2515 [Bug]: Hosted images not rendering