⚡ (s3) Improve storage management and type safety

Closes #756

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx

@@ -1,12 +1,12 @@
 import { SendButton } from '@/components/SendButton'
 import { BotContext, InputSubmitContent } from '@/types'
-import { guessApiHost } from '@/utils/guessApiHost'
 import { FileInputBlock } from '@typebot.io/schemas'
 import { defaultFileInputOptions } from '@typebot.io/schemas/features/blocks/inputs/file'
 import { createSignal, Match, Show, Switch } from 'solid-js'
-import { uploadFiles } from '@typebot.io/lib/s3/uploadFiles'
 import { Button } from '@/components/Button'
 import { Spinner } from '@/components/Spinner'
+import { uploadFiles } from '../helpers/uploadFiles'
+import { guessApiHost } from '@/utils/guessApiHost'
 
 type Props = {
   context: BotContext
@@ -46,20 +46,23 @@ export const FileUploadForm = (props: Props) => {
   }
 
   const startSingleFileUpload = async (file: File) => {
-    if (props.context.isPreview)
+    if (props.context.isPreview || !props.context.resultId)
       return props.onSubmit({
         label: `File uploaded`,
         value: 'http://fake-upload-url.com',
       })
     setIsUploading(true)
     const urls = await uploadFiles({
-      basePath: `${props.context.apiHost ?? guessApiHost()}/api/typebots/${
-        props.context.typebot.id
-      }/blocks/${props.block.id}`,
+      apiHost: props.context.apiHost ?? guessApiHost(),
       files: [
         {
           file,
-          path: `public/results/${props.context.resultId}/${props.block.id}/${file.name}`,
+          input: {
+            resultId: props.context.resultId,
+            typebotId: props.context.typebot.id,
+            blockId: props.block.id,
+            fileName: file.name,
+          },
         },
       ],
     })
@@ -69,7 +72,8 @@ export const FileUploadForm = (props: Props) => {
     setErrorMessage('An error occured while uploading the file')
   }
   const startFilesUpload = async (files: File[]) => {
-    if (props.context.isPreview)
+    const resultId = props.context.resultId
+    if (props.context.isPreview || !resultId)
       return props.onSubmit({
         label: `${files.length} file${files.length > 1 ? 's' : ''} uploaded`,
         value: files
@@ -78,12 +82,15 @@ export const FileUploadForm = (props: Props) => {
       })
     setIsUploading(true)
     const urls = await uploadFiles({
-      basePath: `${props.context.apiHost ?? guessApiHost()}/api/typebots/${
-        props.context.typebot.id
-      }/blocks/${props.block.id}`,
+      apiHost: props.context.apiHost ?? guessApiHost(),
       files: files.map((file) => ({
         file: file,
-        path: `public/results/${props.context.resultId}/${props.block.id}/${file.name}`,
+        input: {
+          resultId,
+          typebotId: props.context.typebot.id,
+          blockId: props.block.id,
+          fileName: file.name,
+        },
       })),
       onUploadProgress: setUploadProgressPercent,
     })

packages/embeds/js/src/features/blocks/inputs/fileUpload/helpers/uploadFiles.ts

@@ -0,0 +1,54 @@
+import { sendRequest } from '@typebot.io/lib/utils'
+
+type UploadFileProps = {
+  apiHost: string
+  files: {
+    file: File
+    input: {
+      typebotId: string
+      blockId: string
+      resultId: string
+      fileName: string
+    }
+  }[]
+  onUploadProgress?: (percent: number) => void
+}
+
+type UrlList = (string | null)[]
+
+export const uploadFiles = async ({
+  apiHost,
+  files,
+  onUploadProgress,
+}: UploadFileProps): Promise<UrlList> => {
+  const urls = []
+  let i = 0
+  for (const { input, file } of files) {
+    onUploadProgress && onUploadProgress((i / files.length) * 100)
+    i += 1
+    const { data } = await sendRequest<{
+      presignedUrl: string
+      fileUrl: string
+    }>({
+      method: 'POST',
+      url: `${apiHost}/api/v1/generate-upload-url`,
+      body: {
+        filePathProps: input,
+        fileType: file.type,
+      },
+    })
+
+    if (!data?.presignedUrl) continue
+    else {
+      const upload = await fetch(data.presignedUrl, {
+        method: 'PUT',
+        body: file,
+      })
+
+      if (!upload.ok) continue
+
+      urls.push(data.fileUrl)
+    }
+  }
+  return urls
+}

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",