chore: replace antd uploads (#19942)

PostHog · Jan 26, 2024 · f22c21f · f22c21f
1 parent ef1d7d1
commit f22c21f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 79 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
@@ -24,6 +24,10 @@ export interface LemonFileInputProps extends Pick<HTMLInputElement, 'multiple' |
      * the text to display to the user, a sensible default is used if not provided
      */
     callToAction?: string | JSX.Element
+    /**
+     * whether to show the uploaded files beneath the upload input
+     */
+    showUploadedFiles?: boolean
 }
 
 export const LemonFileInput = ({
@@ -35,6 +39,7 @@ export const LemonFileInput = ({
     accept,
     alternativeDropTargetRef,
     callToAction,
+    showUploadedFiles = true,
 }: LemonFileInputProps): JSX.Element => {
     const [files, setFiles] = useState(value || value || ([] as File[]))
 
@@ -148,7 +153,7 @@ export const LemonFileInput = ({
                         </>
                     )}
                 </label>
-                {files.length > 0 && (
+                {files.length > 0 && showUploadedFiles && (
                     <div className="flex flex-row gap-2">
                         {files.map((x, i) => (
                             <LemonTag key={i} icon={loading ? <Spinner /> : undefined}>

diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -1,6 +1,4 @@
-import { LemonDivider } from '@posthog/lemon-ui'
-import { UploadFile } from 'antd/es/upload/interface'
-import Dragger from 'antd/lib/upload/Dragger'
+import { LemonDivider, LemonFileInput } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { router } from 'kea-router'
@@ -169,38 +167,36 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                         single column with the user’s distinct ID. The very first row (the header) will
                                         be skipped during import.
                                     </span>
-                                    <Dragger
-                                        name="file"
-                                        multiple={false}
-                                        fileList={cohort.csv ? [cohort.csv] : []}
+                                    <LemonFileInput
                                         accept=".csv"
-                                        showUploadList={false}
-                                        beforeUpload={(file: UploadFile) => {
-                                            onChange(file)
-                                            return false
-                                        }}
-                                        className="cohort-csv-dragger"
-                                    >
-                                        {cohort.csv ? (
-                                            <>
-                                                <IconUploadFile
-                                                    style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
-                                                />
-                                                <div className="ant-upload-text">
-                                                    {cohort.csv?.name ?? 'File chosen'}
-                                                </div>
-                                            </>
-                                        ) : (
-                                            <>
-                                                <IconUploadFile
-                                                    style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
-                                                />
-                                                <div className="ant-upload-text">
-                                                    Drag a file here or click to browse for a file
-                                                </div>
-                                            </>
-                                        )}
-                                    </Dragger>
+                                        multiple={false}
+                                        value={cohort.csv ? [cohort.csv] : []}
+                                        onChange={(files) => onChange(files[0])}
+                                        showUploadedFiles={false}
+                                        callToAction={
+                                            <div className="flex flex-col items-center justify-center flex-1 cohort-csv-dragger text-default space-y-1">
+                                                {cohort.csv ? (
+                                                    <>
+                                                        <IconUploadFile
+                                                            style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
+                                                        />
+                                                        <div className="ant-upload-text">
+                                                            {cohort.csv?.name ?? 'File chosen'}
+                                                        </div>
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        <IconUploadFile
+                                                            style={{ fontSize: '3rem', color: 'var(--muted-alt)' }}
+                                                        />
+                                                        <div className="ant-upload-text">
+                                                            Drag a file here or click to browse for a file
+                                                        </div>
+                                                    </>
+                                                )}
+                                            </div>
+                                        }
+                                    />
                                 </>
                             )}
                         </Field>

diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -17,26 +17,12 @@
 .cohort-csv-dragger {
     height: 155px !important;
     margin-top: 1rem;
-    background-color: transparent !important;
-    border: 2px dashed var(--primary) !important;
-    border-radius: var(--radius) !important;
+    border-color: var(--primary);
+    border-style: dashed;
+    border-width: 2px;
+    border-radius: var(--radius);
 
     &:hover {
-        border-color: var(--primary-3000-hover) !important;
-    }
-
-    .ant-upload-drag-container {
-        display: flex !important;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 1rem;
-
-        .ant-upload-text {
-            margin: 8px 0 0 !important;
-            font-size: 1rem !important;
-            font-weight: 600;
-        }
+        border-color: var(--primary-3000-hover);
     }
 }
diff --git a/frontend/src/scenes/plugins/edit/UploadField.tsx b/frontend/src/scenes/plugins/edit/UploadField.tsx
@@ -1,29 +1,19 @@
-import { Button, Upload } from 'antd'
-import { UploadFile } from 'antd/lib/upload/interface'
+import { LemonButton, LemonFileInput } from '@posthog/lemon-ui'
 import { IconUploadFile } from 'lib/lemon-ui/icons'
 
-export function UploadField({
-    value,
-    onChange,
-}: {
-    value?: UploadFile | null
-    onChange?: (file?: UploadFile | null) => void
-}): JSX.Element {
+export function UploadField({ value, onChange }: { value?: File; onChange?: (file: File) => void }): JSX.Element {
     return (
-        <Upload
+        <LemonFileInput
+            accept={'image/*'}
             multiple={false}
-            fileList={value?.size ? [value] : []}
-            beforeUpload={(file) => {
-                onChange?.(file)
-                return false
-            }}
-            onRemove={() => {
-                onChange?.(null)
-                return false
-            }}
-            className="ph-ignore-input"
-        >
-            <Button icon={<IconUploadFile />}>Click to upload</Button>
-        </Upload>
+            onChange={(files) => onChange?.(files[0])}
+            value={value?.size ? [value] : []}
+            showUploadedFiles={false}
+            callToAction={
+                <LemonButton className="ph-ignore-input" icon={<IconUploadFile />}>
+                    Click to upload
+                </LemonButton>
+            }
+        />
     )
 }
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -1,6 +1,5 @@
 import { PluginConfigSchema } from '@posthog/plugin-scaffold'
 import { eventWithTime } from '@rrweb/types'
-import { UploadFile } from 'antd/lib/upload/interface'
 import { ChartDataset, ChartType, InteractionItem } from 'chart.js'
 import { LogicWrapper } from 'kea'
 import { DashboardCompatibleScenes } from 'lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic'
@@ -977,7 +976,7 @@ export interface CohortType {
     last_calculation?: string
     is_static?: boolean
     name?: string
-    csv?: UploadFile
+    csv?: File
     groups: CohortGroupType[] // To be deprecated once `filter` takes over
     filters: {
         properties: CohortCriteriaGroupFilter