ack PR comments

Author: waleedlatif1

apps/sim/app/api/templates/[id]/og-image/route.ts

@@ -7,6 +7,7 @@ import { generateRequestId } from '@/lib/core/utils/request'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createLogger } from '@/lib/logs/console/logger'
 import { uploadFile } from '@/lib/uploads/core/storage-service'
+import { isValidPng } from '@/lib/uploads/utils/validation'
 
 const logger = createLogger('TemplateOGImageAPI')
 
@@ -50,6 +51,10 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
     const base64Data = imageData.includes(',') ? imageData.split(',')[1] : imageData
     const imageBuffer = Buffer.from(base64Data, 'base64')
 
+    if (!isValidPng(imageBuffer)) {
+      return NextResponse.json({ error: 'Invalid PNG image data' }, { status: 400 })
+    }
+
     const maxSize = 5 * 1024 * 1024
     if (imageBuffer.length > maxSize) {
       return NextResponse.json({ error: 'Image too large. Maximum size is 5MB.' }, { status: 400 })

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx

@@ -232,20 +232,22 @@ export function TemplateDeploy({
       logger.info(`Template ${existingTemplate ? 'updated' : 'created'} successfully`)
 
       setIsCapturing(true)
-      setTimeout(async () => {
-        try {
-          if (ogCaptureRef.current) {
-            const ogUrl = await captureAndUploadOGImage(ogCaptureRef.current, templateId)
-            if (ogUrl) {
-              logger.info(`OG image uploaded for template ${templateId}: ${ogUrl}`)
+      requestAnimationFrame(() => {
+        requestAnimationFrame(async () => {
+          try {
+            if (ogCaptureRef.current) {
+              const ogUrl = await captureAndUploadOGImage(ogCaptureRef.current, templateId)
+              if (ogUrl) {
+                logger.info(`OG image uploaded for template ${templateId}: ${ogUrl}`)
+              }
             }
+          } catch (ogError) {
+            logger.warn('Failed to capture/upload OG image:', ogError)
+          } finally {
+            setIsCapturing(false)
           }
-        } catch (ogError) {
-          logger.warn('Failed to capture/upload OG image:', ogError)
-        } finally {
-          setIsCapturing(false)
-        }
-      }, 100)
+        })
+      })
 
       onDeploymentComplete?.()
     } catch (error) {

apps/sim/lib/uploads/utils/validation.ts

@@ -192,6 +192,15 @@ export function isSupportedVideoExtension(extension: string): extension is Suppo
 /**
  * Validate if an audio/video file type is supported for STT processing
  */
+const PNG_MAGIC_BYTES = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
+
+/**
+ * Validate that a buffer contains valid PNG data by checking magic bytes
+ */
+export function isValidPng(buffer: Buffer): boolean {
+  return buffer.length >= 8 && buffer.subarray(0, 8).equals(PNG_MAGIC_BYTES)
+}
+
 export function validateMediaFileType(
   fileName: string,
   mimeType: string