🚸 (fileUpload) Add clear and skip button labels customization

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}
           </button>
         </div>
       )}
@@ -195,17 +195,17 @@ export const FileUploadForm = ({
                 }
                 onClick={clearFiles}
               >
-                Clear
+                {labels.clear ?? defaultFileInputOptions.labels.clear}
               </button>
             )}
             <SendButton
               type="submit"
               label={
-                labels.button
+                labels.button === defaultFileInputOptions.labels.button
                   ? `${labels.button} ${selectedFiles.length} file${
                       selectedFiles.length > 1 ? 's' : ''
                     }`
-                  : 'Upload'
+                  : labels.button
               }
               disableIcon
             />

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}
           </button>
         </div>
       </Show>
@@ -199,15 +200,17 @@ export const FileUploadForm = (props: Props) => {
                 }
                 onClick={clearFiles}
               >
-                Clear
+                {props.block.options.labels.clear ??
+                  defaultFileInputOptions.labels.clear}
               </button>
             </Show>
             <SendButton type="submit" disableIcon>
-              {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}
             </SendButton>
           </div>
         </div>

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 = {
     </strong> or drag and drop<br>
     (size limit: 10MB)`,
     button: 'Upload',
+    clear: 'Clear',
+    skip: 'Skip',
   },
 }