fix image upload

gempir · Apr 14, 2024 · 5d3d8ad · 5d3d8ad
1 parent 9ef7baf
commit 5d3d8ad
Showing 1 changed file with 28 additions and 10 deletions.
diff --git a/web/src/components/Overlay/Editor.tsx b/web/src/components/Overlay/Editor.tsx
@@ -1,4 +1,5 @@
-import { AssetRecordType, Editor, MediaHelpers, TLAsset, TLAssetId, Tldraw, TldrawProps, getHashForString } from '@tldraw/tldraw';
+import { AssetRecordType, Editor, TLAsset, TLAssetId, Tldraw, TldrawProps, getHashForString } from '@tldraw/tldraw';
+import { MediaHelpers, isGifAnimated } from 'tldraw';
 import '@tldraw/tldraw/tldraw.css';
 import { useAssetUploader } from '../../hooks/useAssetUploader';
 import { useYjsStore } from '../../hooks/useYjsStore';
@@ -21,24 +22,41 @@ export function CustomEditor(props: Partial<TldrawProps> & Props) {
         } else {
             editor.registerExternalAssetHandler('file', async ({ file }: { type: 'file'; file: File }) => {
                 const uploadedAsset = await upload(file);
-                const assetId: TLAssetId = AssetRecordType.createId(getHashForString(uploadedAsset.id))
-
-                const size = uploadedAsset.isVideo ? await MediaHelpers.getVideoSizeFromSrc(uploadedAsset.url) : await MediaHelpers.getImageSizeFromSrc(uploadedAsset.url);
-
+                //[b]
+                const assetId: TLAssetId = AssetRecordType.createId(getHashForString(uploadedAsset.url))
+
+                let size: {
+                    w: number
+                    h: number
+                }
+                let isAnimated: boolean
+                let shapeType: 'image' | 'video'
+
+                //[c]
+                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))
+                } else {
+                    shapeType = 'video'
+                    isAnimated = true
+                    size = await MediaHelpers.getVideoSize(file)
+                }
+                //[d]
                 const asset: TLAsset = AssetRecordType.create({
                     id: assetId,
-                    type: uploadedAsset.isVideo ? 'video' : 'image',
+                    type: shapeType,
                     typeName: 'asset',
                     props: {
-                        name: uploadedAsset.id,
+                        name: file.name,
                         src: uploadedAsset.url,
                         w: size.w,
                         h: size.h,
-                        mimeType: uploadedAsset.mimeType,
-                        isAnimated: uploadedAsset.isAnimated,
+                        mimeType: file.type,
+                        isAnimated,
                     },
                 })
-
+    
                 return asset
             })
         }