feat(editor): ✨ Add file upload input

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx

@@ -19,6 +19,7 @@ import {
   WithVariableContent,
 } from './contents'
 import { ConfigureContent } from './contents/ConfigureContent'
+import { FileInputContent } from './contents/FileInputContent'
 import { ImageBubbleContent } from './contents/ImageBubbleContent'
 import { PaymentInputContent } from './contents/PaymentInputContent'
 import { PlaceholderContent } from './contents/PlaceholderContent'
@@ -80,6 +81,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     case InputBlockType.RATING: {
       return <RatingInputContent block={block} />
     }
+    case InputBlockType.FILE: {
+      return <FileInputContent options={block.options} />
+    }
     case LogicBlockType.SET_VARIABLE: {
       return <SetVariableContent block={block} />
     }

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNodeContent/contents/FileInputContent.tsx

@@ -0,0 +1,12 @@
+import { Text } from '@chakra-ui/react'
+import { FileInputOptions } from 'models'
+
+type Props = {
+  options: FileInputOptions
+}
+
+export const FileInputContent = ({ options: { isMultipleAllowed } }: Props) => (
+  <Text noOfLines={0} pr="6">
+    Collect {isMultipleAllowed ? 'files' : 'file'}
+  </Text>
+)

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -29,6 +29,7 @@ import {
 import { ChoiceInputSettingsBody } from './bodies/ChoiceInputSettingsBody'
 import { CodeSettings } from './bodies/CodeSettings'
 import { ConditionSettingsBody } from './bodies/ConditionSettingsBody'
+import { FileInputSettings } from './bodies/FileInputSettings'
 import { GoogleAnalyticsSettings } from './bodies/GoogleAnalyticsSettings'
 import { GoogleSheetsSettingsBody } from './bodies/GoogleSheetsSettingsBody'
 import { PaymentSettings } from './bodies/PaymentSettings'
@@ -173,6 +174,14 @@ export const BlockSettings = ({
         />
       )
     }
+    case InputBlockType.FILE: {
+      return (
+        <FileInputSettings
+          options={block.options}
+          onOptionsChange={handleOptionsChange}
+        />
+      )
+    }
     case LogicBlockType.SET_VARIABLE: {
       return (
         <SetVariableSettings

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/FileInputSettings.tsx

@@ -0,0 +1,64 @@
+import { FormLabel, Stack } from '@chakra-ui/react'
+import { CodeEditor } from 'components/shared/CodeEditor'
+import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
+import { Input } from 'components/shared/Textbox'
+import { VariableSearchInput } from 'components/shared/VariableSearchInput'
+import { FileInputOptions, Variable } from 'models'
+import React from 'react'
+
+type Props = {
+  options: FileInputOptions
+  onOptionsChange: (options: FileInputOptions) => void
+}
+
+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 handleLongChange = (isMultipleAllowed: boolean) =>
+    onOptionsChange({ ...options, isMultipleAllowed })
+  const handleVariableChange = (variable?: Variable) =>
+    onOptionsChange({ ...options, variableId: variable?.id })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithLabel
+        id="switch"
+        label="Allow multiple files?"
+        initialValue={options.isMultipleAllowed}
+        onCheckChange={handleLongChange}
+      />
+      <Stack>
+        <FormLabel mb="0">Placeholder:</FormLabel>
+        <CodeEditor
+          lang="html"
+          onChange={handlePlaceholderLabelChange}
+          value={options.labels.placeholder}
+          height={'100px'}
+          withVariableButton={false}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="button">
+          Button label:
+        </FormLabel>
+        <Input
+          id="button"
+          defaultValue={options.labels.button}
+          onChange={handleButtonLabelChange}
+          withVariableButton={false}
+        />
+      </Stack>
+      <Stack>
+        <FormLabel mb="0" htmlFor="variable">
+          Save upload URL{options.isMultipleAllowed ? 's' : ''} in a variable:
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options.variableId}
+          onSelectVariable={handleVariableChange}
+        />
+      </Stack>
+    </Stack>
+  )
+}