♻️ Improve file upload management

Closes #138

apps/builder/components/shared/EditableEmojiOrImageIcon.tsx

@@ -11,12 +11,14 @@ import { EmojiOrImageIcon } from './EmojiOrImageIcon'
 import { ImageUploadContent } from './ImageUploadContent'
 
 type Props = {
+  uploadFilePath: string
   icon?: string | null
   onChangeIcon: (icon: string) => void
   boxSize?: string
 }
 
 export const EditableEmojiOrImageIcon = ({
+  uploadFilePath,
   icon,
   onChangeIcon,
   boxSize,
@@ -47,7 +49,8 @@ export const EditableEmojiOrImageIcon = ({
           </Tooltip>
           <PopoverContent p="2">
             <ImageUploadContent
-              url={icon ?? ''}
+              filePath={uploadFilePath}
+              defaultUrl={icon ?? ''}
               onSubmit={onChangeIcon}
               isGiphyEnabled={false}
               isEmojiEnabled={true}

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}
         />
       )

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -2,12 +2,13 @@ import { useState } from 'react'
 import { Button, Flex, HStack, Stack } from '@chakra-ui/react'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearchForm } from './GiphySearchForm'
-import { useTypebot } from 'contexts/TypebotContext'
 import { Input } from '../Textbox/Input'
 import { EmojiSearchableList } from './emoji/EmojiSearchableList'
 
 type Props = {
-  url?: string
+  filePath: string
+  includeFileName?: boolean
+  defaultUrl?: string
   isEmojiEnabled?: boolean
   isGiphyEnabled?: boolean
   onSubmit: (url: string) => void
@@ -15,7 +16,9 @@ type Props = {
 }
 
 export const ImageUploadContent = ({
-  url,
+  filePath,
+  includeFileName,
+  defaultUrl,
   onSubmit,
   isEmojiEnabled = false,
   isGiphyEnabled = true,
@@ -67,25 +70,41 @@ export const ImageUploadContent = ({
         )}
       </HStack>
 
-      <BodyContent tab={currentTab} onSubmit={handleSubmit} url={url} />
+      <BodyContent
+        filePath={filePath}
+        includeFileName={includeFileName}
+        tab={currentTab}
+        onSubmit={handleSubmit}
+        defaultUrl={defaultUrl}
+      />
     </Stack>
   )
 }
 
 const BodyContent = ({
+  includeFileName,
+  filePath,
   tab,
-  url,
+  defaultUrl,
   onSubmit,
 }: {
+  includeFileName?: boolean
+  filePath: string
   tab: 'upload' | 'link' | 'giphy' | 'emoji'
-  url?: string
+  defaultUrl?: string
   onSubmit: (url: string) => void
 }) => {
   switch (tab) {
     case 'upload':
-      return <UploadFileContent onNewUrl={onSubmit} />
+      return (
+        <UploadFileContent
+          filePath={filePath}
+          includeFileName={includeFileName}
+          onNewUrl={onSubmit}
+        />
+      )
     case 'link':
-      return <EmbedLinkContent initialUrl={url} onNewUrl={onSubmit} />
+      return <EmbedLinkContent defaultUrl={defaultUrl} onNewUrl={onSubmit} />
     case 'giphy':
       return <GiphyContent onNewUrl={onSubmit} />
     case 'emoji':
@@ -93,30 +112,34 @@ const BodyContent = ({
   }
 }
 
-type ContentProps = { initialUrl?: string; onNewUrl: (url: string) => void }
+type ContentProps = { onNewUrl: (url: string) => void }
 
-const UploadFileContent = ({ onNewUrl }: ContentProps) => {
-  const { typebot } = useTypebot()
-  return (
-    <Flex justify="center" py="2">
-      <UploadButton
-        filePath={`public/typebots/${typebot?.id}`}
-        onFileUploaded={onNewUrl}
-        includeFileName
-        colorScheme="blue"
-      >
-        Choose an image
-      </UploadButton>
-    </Flex>
-  )
-}
+const UploadFileContent = ({
+  filePath,
+  includeFileName,
+  onNewUrl,
+}: ContentProps & { filePath: string; includeFileName?: boolean }) => (
+  <Flex justify="center" py="2">
+    <UploadButton
+      filePath={filePath}
+      onFileUploaded={onNewUrl}
+      includeFileName={includeFileName}
+      colorScheme="blue"
+    >
+      Choose an image
+    </UploadButton>
+  </Flex>
+)
 
-const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => (
+const EmbedLinkContent = ({
+  defaultUrl,
+  onNewUrl,
+}: ContentProps & { defaultUrl?: string }) => (
   <Stack py="2">
     <Input
       placeholder={'Paste the image link...'}
       onChange={onNewUrl}
-      defaultValue={initialUrl ?? ''}
+      defaultValue={defaultUrl ?? ''}
     />
   </Stack>
 )

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -140,10 +140,13 @@ export const TypebotHeader = () => {
             size="sm"
           />
           <HStack spacing={1}>
-            <EditableEmojiOrImageIcon
-              icon={typebot?.icon}
-              onChangeIcon={handleChangeIcon}
-            />
+            {typebot && (
+              <EditableEmojiOrImageIcon
+                uploadFilePath={`typebots/${typebot.id}/icon`}
+                icon={typebot?.icon}
+                onChangeIcon={handleChangeIcon}
+              />
+            )}
             {typebot?.name && (
               <EditableTypebotName
                 name={typebot?.name}

apps/builder/components/shared/buttons/UploadButton.tsx

@@ -25,7 +25,7 @@ export const UploadButton = ({
       files: [
         {
           file: await compressFile(file),
-          path: filePath + (includeFileName ? `/${file.name}` : ''),
+          path: `public/${filePath}${includeFileName ? `/${file.name}` : ''}`,
         },
       ],
     })