diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
index a083b432c..d08dd1fdf 100644
--- a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputSettings.tsx
@@ -14,16 +14,28 @@ type Props = {
export const FileInputSettings = ({ options, onOptionsChange }: Props) => {
const handleButtonLabelChange = (button: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, button } })
+
const handlePlaceholderLabelChange = (placeholder: string) =>
onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
+
const handleMultipleFilesChange = (isMultipleAllowed: boolean) =>
onOptionsChange({ ...options, isMultipleAllowed })
+
const handleVariableChange = (variable?: Variable) =>
onOptionsChange({ ...options, variableId: variable?.id })
+
const handleSizeLimitChange = (sizeLimit?: number) =>
onOptionsChange({ ...options, sizeLimit })
+
const handleRequiredChange = (isRequired: boolean) =>
onOptionsChange({ ...options, isRequired })
+
+ const updateClearButtonLabel = (clear: string) =>
+ onOptionsChange({ ...options, labels: { ...options.labels, clear } })
+
+ const updateSkipButtonLabel = (skip: string) =>
+ onOptionsChange({ ...options, labels: { ...options.labels, skip } })
+
return (
{
withVariableButton={false}
/>
-
-
- Button label:
-
-
-
+
+
+
Save upload URL{options.isMultipleAllowed ? 's' : ''} in a variable:
diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
index 7d027c9ce..4bcf3bc17 100644
--- a/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
+++ b/apps/builder/src/features/blocks/inputs/fileUpload/fileUpload.spec.ts
@@ -37,9 +37,11 @@ test('options should work', async ({ page }) => {
await page.click('text="Allow multiple files?"')
await page.fill('div[contenteditable=true]', 'Upload now!!')
await page.fill('[value="Upload"]', 'Go')
+ await page.fill('[value="Clear"]', 'Reset')
+ await page.fill('[value="Skip"]', 'Pass')
await page.fill('input[value="10"]', '20')
await page.click('text="Restart"')
- await expect(typebotViewer(page).locator(`text="Skip"`)).toBeVisible()
+ await expect(typebotViewer(page).locator(`text="Pass"`)).toBeVisible()
await expect(typebotViewer(page).locator(`text="Upload now!!"`)).toBeVisible()
await typebotViewer(page)
.locator(`input[type="file"]`)
@@ -49,7 +51,7 @@ test('options should work', async ({ page }) => {
getTestAsset('avatar.jpg'),
])
await expect(typebotViewer(page).locator(`text="3"`)).toBeVisible()
- await typebotViewer(page).locator('text="Go 3 files"').click()
+ await typebotViewer(page).locator('text="Go"').click()
await expect(
typebotViewer(page).locator(`text="3 files uploaded"`)
).toBeVisible()
diff --git a/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
index 6af4cba7f..21cf28302 100644
--- a/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
+++ b/packages/bot-engine/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
@@ -2,7 +2,7 @@ import { Spinner, SendButton } from '@/components/SendButton'
import { useAnswers } from '@/providers/AnswersProvider'
import { useTypebot } from '@/providers/TypebotProvider'
import { InputSubmitContent } from '@/types'
-import { FileInputBlock } from 'models'
+import { defaultFileInputOptions, FileInputBlock } from 'models'
import React, { ChangeEvent, FormEvent, useState, DragEvent } from 'react'
import { uploadFiles } from 'utils'
@@ -181,7 +181,7 @@ export const FileUploadForm = ({
}
onClick={onSkip}
>
- Skip
+ {labels.skip ?? defaultFileInputOptions.labels.skip}
)}
@@ -195,17 +195,17 @@ export const FileUploadForm = ({
}
onClick={clearFiles}
>
- Clear
+ {labels.clear ?? defaultFileInputOptions.labels.clear}
)}
1 ? 's' : ''
}`
- : 'Upload'
+ : labels.button
}
disableIcon
/>
diff --git a/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx b/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
index 12a9a06bb..87f15e509 100644
--- a/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
+++ b/packages/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx
@@ -1,6 +1,6 @@
import { SendButton, Spinner } from '@/components/SendButton'
import { BotContext, InputSubmitContent } from '@/types'
-import { FileInputBlock } from 'models'
+import { defaultFileInputOptions, FileInputBlock } from 'models'
import { createSignal, Match, Show, Switch } from 'solid-js'
import { uploadFiles } from 'utils'
@@ -179,7 +179,8 @@ export const FileUploadForm = (props: Props) => {
}
onClick={() => props.onSkip()}
>
- Skip
+ {props.block.options.labels.skip ??
+ defaultFileInputOptions.labels.skip}
@@ -199,15 +200,17 @@ export const FileUploadForm = (props: Props) => {
}
onClick={clearFiles}
>
- Clear
+ {props.block.options.labels.clear ??
+ defaultFileInputOptions.labels.clear}
- {props.block.options.labels.button
- ? `${props.block.options.labels.button} ${
- selectedFiles().length
- } file${selectedFiles().length > 1 ? 's' : ''}`
- : 'Upload'}
+ {props.block.options.labels.button ===
+ defaultFileInputOptions.labels.button
+ ? `Upload ${selectedFiles().length} file${
+ selectedFiles().length > 1 ? 's' : ''
+ }`
+ : props.block.options.labels.button}
diff --git a/packages/models/src/features/blocks/inputs/file.ts b/packages/models/src/features/blocks/inputs/file.ts
index 9a2687eaf..45ad8993e 100644
--- a/packages/models/src/features/blocks/inputs/file.ts
+++ b/packages/models/src/features/blocks/inputs/file.ts
@@ -8,6 +8,8 @@ export const fileInputOptionsSchema = optionBaseSchema.and(
labels: z.object({
placeholder: z.string(),
button: z.string(),
+ clear: z.string().optional(),
+ skip: z.string().optional(),
}),
sizeLimit: z.number().optional(),
})
@@ -29,6 +31,8 @@ export const defaultFileInputOptions: FileInputOptions = {
or drag and drop
(size limit: 10MB)`,
button: 'Upload',
+ clear: 'Clear',
+ skip: 'Skip',
},
}