⚡ (s3) Improve storage management and type safety

Closes #756

apps/builder/src/features/blocks/bubbles/audio/audio.spec.ts

@@ -4,6 +4,7 @@ import { parseDefaultGroupWithBlock } from '@typebot.io/lib/playwright/databaseH
 import { BubbleBlockType, defaultAudioBubbleContent } from '@typebot.io/schemas'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
+import { proWorkspaceId } from '@typebot.io/lib/playwright/databaseSetup'
 
 const audioSampleUrl =
   'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
@@ -30,11 +31,17 @@ test('should work as expected', async ({ page }) => {
   await page.setInputFiles('input[type="file"]', getTestAsset('sample.mp3'))
   await expect(page.locator('audio')).toHaveAttribute(
     'src',
-    RegExp(`/public/typebots/${typebotId}/blocks`, 'gm')
+    RegExp(
+      `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks`,
+      'gm'
+    )
   )
   await page.getByRole('button', { name: 'Preview', exact: true }).click()
   await expect(page.locator('audio')).toHaveAttribute(
     'src',
-    RegExp(`/public/typebots/${typebotId}/blocks`, 'gm')
+    RegExp(
+      `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks`,
+      'gm'
+    )
   )
 })

apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx

@@ -5,15 +5,16 @@ import { useState } from 'react'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { useScopedI18n } from '@/locales'
+import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
 
 type Props = {
-  fileUploadPath: string
+  uploadFileProps: FilePathUploadProps
   content: AudioBubbleContent
   onContentChange: (content: AudioBubbleContent) => void
 }
 
 export const AudioBubbleForm = ({
-  fileUploadPath,
+  uploadFileProps,
   content,
   onContentChange,
 }: Props) => {
@@ -49,7 +50,7 @@ export const AudioBubbleForm = ({
             <Flex justify="center" py="2">
               <UploadButton
                 fileType="audio"
-                filePath={fileUploadPath}
+                filePathProps={uploadFileProps}
                 onFileUploaded={updateUrl}
                 colorScheme="blue"
               >

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleSettings.tsx

@@ -1,6 +1,7 @@
 import { ImageUploadContent } from '@/components/ImageUploadContent'
 import { TextInput } from '@/components/inputs'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
+import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
 import { useScopedI18n } from '@/locales'
 import { Stack } from '@chakra-ui/react'
 import { isDefined, isNotEmpty } from '@typebot.io/lib'
@@ -8,13 +9,13 @@ import { ImageBubbleBlock } from '@typebot.io/schemas'
 import React, { useState } from 'react'
 
 type Props = {
-  typebotId: string
+  uploadFileProps: FilePathUploadProps
   block: ImageBubbleBlock
   onContentChange: (content: ImageBubbleBlock['content']) => void
 }
 
 export const ImageBubbleSettings = ({
-  typebotId,
+  uploadFileProps,
   block,
   onContentChange,
 }: Props) => {
@@ -53,7 +54,7 @@ export const ImageBubbleSettings = ({
   return (
     <Stack p="2" spacing={4}>
       <ImageUploadContent
-        filePath={`typebots/${typebotId}/blocks/${block.id}`}
+        uploadFileProps={uploadFileProps}
         defaultUrl={block.content?.url}
         onSubmit={updateImage}
       />

apps/builder/src/features/blocks/bubbles/image/image.spec.ts

@@ -4,6 +4,7 @@ import { parseDefaultGroupWithBlock } from '@typebot.io/lib/playwright/databaseH
 import { BubbleBlockType, defaultImageBubbleContent } from '@typebot.io/schemas'
 import { createId } from '@paralleldrive/cuid2'
 import { getTestAsset } from '@/test/utils/playwright'
+import { proWorkspaceId } from '@typebot.io/lib/playwright/databaseSetup'
 
 const unsplashImageSrc =
   'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
@@ -29,7 +30,10 @@ test.describe.parallel('Image bubble block', () => {
       await page.setInputFiles('input[type="file"]', getTestAsset('avatar.jpg'))
       await expect(page.locator('img')).toHaveAttribute(
         'src',
-        new RegExp(`/public/typebots/${typebotId}/blocks/block2`, 'gm')
+        new RegExp(
+          `/public/workspaces/${proWorkspaceId}/typebots/${typebotId}/blocks/block2`,
+          'gm'
+        )
       )
     })