🚸 (fileUpload) Add success labels cutomization

Closes #515

packages/bot-engine/blocks/inputs/url/validateUrl.ts

@@ -2,4 +2,6 @@ const urlRegex =
   /^(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]:[0-9]*\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]:[0-9]*\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})$/
 
 export const validateUrl = (url: string) =>
-  url.startsWith('http://localhost') || urlRegex.test(url)
+  url.startsWith('http://localhost') ||
+  url.startsWith('http://fake-upload-url.com') ||
+  urlRegex.test(url)

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.39",
+  "version": "0.2.40",
   "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

@@ -51,7 +51,9 @@ export const FileUploadForm = (props: Props) => {
   const startSingleFileUpload = async (file: File) => {
     if (props.context.isPreview || !props.context.resultId)
       return props.onSubmit({
-        label: `File uploaded`,
+        label:
+          props.block.options?.labels?.success?.single ??
+          defaultFileInputOptions.labels.success.single,
         value: 'http://fake-upload-url.com',
       })
     setIsUploading(true)
@@ -70,7 +72,9 @@ export const FileUploadForm = (props: Props) => {
     setIsUploading(false)
     if (urls.length)
       return props.onSubmit({
-        label: `File uploaded`,
+        label:
+          props.block.options?.labels?.success?.single ??
+          defaultFileInputOptions.labels.success.single,
         value: urls[0] ? encodeUrl(urls[0]) : '',
       })
     setErrorMessage('An error occured while uploading the file')
@@ -79,7 +83,14 @@ export const FileUploadForm = (props: Props) => {
     const resultId = props.context.resultId
     if (props.context.isPreview || !resultId)
       return props.onSubmit({
-        label: `${files.length} file${files.length > 1 ? 's' : ''} uploaded`,
+        label:
+          files.length > 1
+            ? (
+                props.block.options?.labels?.success?.multiple ??
+                defaultFileInputOptions.labels.success.multiple
+              ).replaceAll('{total}', files.length.toString())
+            : props.block.options?.labels?.success?.single ??
+              defaultFileInputOptions.labels.success.single,
         value: files
           .map((_, idx) => `http://fake-upload-url.com/${idx}`)
           .join(', '),
@@ -101,7 +112,14 @@ export const FileUploadForm = (props: Props) => {
     if (urls.length !== files.length)
       return setErrorMessage('An error occured while uploading the files')
     props.onSubmit({
-      label: `${urls.length} file${urls.length > 1 ? 's' : ''} uploaded`,
+      label:
+        urls.length > 1
+          ? (
+              props.block.options?.labels?.success?.multiple ??
+              defaultFileInputOptions.labels.success.multiple
+            ).replaceAll('{total}', urls.length.toString())
+          : props.block.options?.labels?.success?.single ??
+            defaultFileInputOptions.labels.success.single,
       value: urls.filter(isDefined).map(encodeUrl).join(', '),
     })
   }

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.39",
+  "version": "0.2.40",
   "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.2.39",
+  "version": "0.2.40",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/schemas/features/blocks/inputs/file/constants.ts

@@ -12,6 +12,10 @@ export const defaultFileInputOptions = {
     button: 'Upload',
     clear: 'Clear',
     skip: 'Skip',
+    success: {
+      single: 'File uploaded',
+      multiple: '{total} files uploaded',
+    },
   },
 } as const satisfies FileInputBlock['options']
 

packages/schemas/features/blocks/inputs/file/schema.ts

@@ -13,6 +13,12 @@ const fileInputOptionsV5Schema = optionBaseSchema.merge(
         button: z.string().optional(),
         clear: z.string().optional(),
         skip: z.string().optional(),
+        success: z
+          .object({
+            single: z.string().optional(),
+            multiple: z.string().optional(),
+          })
+          .optional(),
       })
       .optional(),
     sizeLimit: z.number().optional(),