♻️ Improve file upload management

Closes #138

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -55,7 +55,7 @@ export const BlockNode = ({
     setFocusedGroupId,
     previewingEdge,
   } = useGraph()
-  const { updateBlock } = useTypebot()
+  const { typebot, updateBlock } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
   const [isPopoverOpened, setIsPopoverOpened] = useState(
     openedBlockId === block.id
@@ -227,8 +227,9 @@ export const BlockNode = ({
               </SettingsModal>
             </>
           )}
-          {isMediaBubbleBlock(block) && (
+          {typebot && isMediaBubbleBlock(block) && (
             <MediaBubblePopoverContent
+              typebotId={typebot.id}
               block={block}
               onContentChange={handleContentChange}
             />

apps/builder/components/shared/Graph/Nodes/BlockNode/MediaBubblePopoverContent/MediaBubblePopoverContent.tsx

@@ -16,6 +16,7 @@ import { EmbedUploadContent } from './EmbedUploadContent'
 import { VideoUploadContent } from './VideoUploadContent'
 
 type Props = {
+  typebotId: string
   block: Exclude<BubbleBlock, TextBubbleBlock>
   onContentChange: (content: BubbleBlockContent) => void
 }
@@ -39,14 +40,19 @@ export const MediaBubblePopoverContent = (props: Props) => {
   )
 }
 
-export const MediaBubbleContent = ({ block, onContentChange }: Props) => {
+export const MediaBubbleContent = ({
+  typebotId,
+  block,
+  onContentChange,
+}: Props) => {
   const handleImageUrlChange = (url: string) => onContentChange({ url })
 
   switch (block.type) {
     case BubbleBlockType.IMAGE: {
       return (
         <ImageUploadContent
-          url={block.content?.url}
+          filePath={`typebots/${typebotId}/blocks/${block.id}`}
+          defaultUrl={block.content?.url}
           onSubmit={handleImageUrlChange}
         />
       )