🐛 (fileUpload) Fix results file display if name contains comma

Closes #955
baptisteArno · Nov 14, 2023 · bd198a4 · bd198a4
1 parent fd00b6f
commit bd198a4
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/apps/builder/src/features/results/components/FileLinks.tsx b/apps/builder/src/features/results/components/FileLinks.tsx
@@ -10,7 +10,7 @@ export const FileLinks = ({ fileNamesStr }: { fileNamesStr: string }) => {
         <HStack as={WrapItem} key={name}>
           <FileIcon />
           <TextLink href={name} isExternal>
-            {name.split('/').pop()}
+            {decodeURIComponent(name.split('/').pop() ?? '')}
           </TextLink>
         </HStack>
       ))}

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
@@ -8,6 +8,7 @@ import { uploadFiles } from '../helpers/uploadFiles'
 import { guessApiHost } from '@/utils/guessApiHost'
 import { getRuntimeVariable } from '@typebot.io/env/getRuntimeVariable'
 import { defaultFileInputOptions } from '@typebot.io/schemas/features/blocks/inputs/file/constants'
+import { isDefined } from '@typebot.io/lib'
 
 type Props = {
   context: BotContext
@@ -68,7 +69,10 @@ export const FileUploadForm = (props: Props) => {
     })
     setIsUploading(false)
     if (urls.length)
-      return props.onSubmit({ label: `File uploaded`, value: urls[0] ?? '' })
+      return props.onSubmit({
+        label: `File uploaded`,
+        value: urls[0] ? encodeURI(urls[0]) : '',
+      })
     setErrorMessage('An error occured while uploading the file')
   }
   const startFilesUpload = async (files: File[]) => {
@@ -98,7 +102,7 @@ export const FileUploadForm = (props: Props) => {
       return setErrorMessage('An error occured while uploading the files')
     props.onSubmit({
       label: `${urls.length} file${urls.length > 1 ? 's' : ''} uploaded`,
-      value: urls.join(', '),
+      value: urls.filter(isDefined).map(encodeURI).join(', '),
     })
   }
 
@@ -219,7 +223,8 @@ export const FileUploadForm = (props: Props) => {
               </Button>
             </Show>
             <SendButton type="submit" disableIcon>
-              {props.block.options?.labels?.button ===
+              {(props.block.options?.labels?.button ??
+                defaultFileInputOptions.labels.button) ===
               defaultFileInputOptions.labels.button
                 ? `Upload ${selectedFiles().length} file${
                     selectedFiles().length > 1 ? 's' : ''

diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",