fix up sources NPE

apps/dotcom/src/utils/createAssetFromFile.ts

@@ -31,6 +31,7 @@ export async function createAssetFromFile({ file }: { type: 'file'; file: File }
 	}
 	let isAnimated: boolean
 
+	let props
 	if (isImageType) {
 		size = await MediaHelpers.getImageSize(file)
 		if (file.type === 'image/gif') {
@@ -38,23 +39,37 @@ export async function createAssetFromFile({ file }: { type: 'file'; file: File }
 		} else {
 			isAnimated = false
 		}
+		props = {
+			name: file.name,
+			sources: [
+				{
+					scale: 1,
+					src: url,
+				},
+			],
+			w: size.w,
+			h: size.h,
+			mimeType: file.type,
+			isAnimated,
+		}
 	} else {
 		isAnimated = true
 		size = await MediaHelpers.getVideoSize(file)
-	}
-
-	const asset: TLAsset = AssetRecordType.create({
-		id: assetId,
-		type: isImageType ? 'image' : 'video',
-		typeName: 'asset',
-		props: {
+		props = {
 			name: file.name,
 			src: url,
 			w: size.w,
 			h: size.h,
 			mimeType: file.type,
 			isAnimated,
-		},
+		}
+	}
+
+	const asset: TLAsset = AssetRecordType.create({
+		id: assetId,
+		type: isImageType ? 'image' : 'video',
+		typeName: 'asset',
+		props,
 		meta: {},
 	})
 

apps/examples/src/examples/hosted-images/HostedImagesExample.tsx

@@ -40,28 +40,43 @@ export default function HostedImagesExample() {
 			let shapeType: 'image' | 'video'
 
 			//[c]
+			let props
 			if (['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml'].includes(file.type)) {
 				shapeType = 'image'
 				size = await MediaHelpers.getImageSize(file)
 				isAnimated = file.type === 'image/gif' && (await isGifAnimated(file))
+				props = {
+					name: file.name,
+					sources: [
+						{
+							scale: 1,
+							src: url,
+						},
+					],
+					w: size.w,
+					h: size.h,
+					mimeType: file.type,
+					isAnimated,
+				}
 			} else {
 				shapeType = 'video'
 				isAnimated = true
 				size = await MediaHelpers.getVideoSize(file)
-			}
-			//[d]
-			const asset: TLAsset = AssetRecordType.create({
-				id: assetId,
-				type: shapeType,
-				typeName: 'asset',
-				props: {
+				props = {
 					name: file.name,
 					src: url,
 					w: size.w,
 					h: size.h,
 					mimeType: file.type,
 					isAnimated,
-				},
+				}
+			}
+			//[d]
+			const asset: TLAsset = AssetRecordType.create({
+				id: assetId,
+				type: shapeType,
+				typeName: 'asset',
+				props,
 			})
 
 			return asset

packages/tldraw/src/lib/defaultExternalContentHandlers.ts

@@ -85,20 +85,21 @@ export function registerDefaultExternalContentHandlers(
 		const assetId: TLAssetId = AssetRecordType.createId(hash)
 
 		if (isImageType) {
-			const sources: TLImageAsset['props']['sources'] = []
+			const sources: TLImageAsset['props']['sources'] = [
+				{
+					scale: 1,
+					src: await FileHelpers.blobToDataUrl(
+						await downsizeImage(file, size.w, size.h, {
+							type: file.type,
+							quality: 0.92,
+						})
+					),
+				},
+			]
 
 			// Always rescale the image
 			if (file.type === 'image/jpeg' || file.type === 'image/png') {
 				sources.push(
-					{
-						scale: 1,
-						src: await FileHelpers.blobToDataUrl(
-							await downsizeImage(file, size.w, size.h, {
-								type: file.type,
-								quality: 0.92,
-							})
-						),
-					},
 					{
 						scale: 1 / 2,
 						src: await FileHelpers.blobToDataUrl(