diff --git a/src/components/FileInput/FileInput.stories.tsx b/src/components/FileInput/FileInput.stories.tsx
deleted file mode 100644
index 13699a2..0000000
--- a/src/components/FileInput/FileInput.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { FileInput } from './index.js'
-
-export default {
-  title: 'FileInput (WIP)',
-  component: FileInput,
-}
-
-export const Default = () => {
-  //   const [value, setValue] = useState<number>()
-  return <FileInput />
-}
diff --git a/src/components/FileInput/index.tsx b/src/components/FileInput/index.tsx
deleted file mode 100644
index e4f4dea..0000000
--- a/src/components/FileInput/index.tsx
+++ /dev/null
@@ -1,287 +0,0 @@
-import { useRef, useState } from 'react'
-import { colors } from '../../utils/colors.js'
-import { radius } from '../../utils/radius.js'
-import { Button } from '../Button/index.js'
-import { Icon } from '../Icon/index.js'
-import { Text } from '../Text/index.js'
-import { useDialog } from '../Dialog/index.js'
-import { useClient } from '@based/react'
-import { Loader } from '../Loader/index.js'
-import { prettyNumber } from '@based/pretty-number'
-import { styled } from 'inlines'
-import { IconButton } from '../IconButton/index.js'
-import { Menu } from '../Menu/index.js'
-
-// TODO download button
-// TODO individual errors per uploaded files
-// TODO handle outside state/value correctly
-// TODO correctly handle partial UIFiles
-
-type UIFile = {
-  name?: string
-  src: string
-  size?: number
-}
-
-type FileInptuProps = {
-  value?: UIFile | UIFile[]
-  onChange: (value: UIFile | UIFile[]) => void
-  error?: string
-}
-
-function FileInput(props: FileInptuProps) {
-  const dialog = useDialog()
-  const client = useClient()
-  const fileInputRef = useRef<HTMLInputElement>()
-  const [dragOver, setDragOver] = useState(false)
-  const [files, setFiles] = useState<
-    {
-      tempId: string
-      name: string
-      size: number
-      progress: number
-      error?: string
-    }[]
-  >([])
-  const [itemWithOpenMenuId, setItemWithOpenMenuId] = useState<string>()
-
-  async function uploadFiles(files: File[]) {
-    await Promise.allSettled(
-      files.map(async (file) => {
-        const tempId = crypto.randomUUID()
-        setFiles((p) => [
-          ...p,
-          { tempId, name: file.name, size: file.size, progress: 0 },
-        ])
-
-        await client.stream(
-          'db:file-upload',
-          { contents: file, fileName: file.name, mimeType: file.type },
-          (progress) => {
-            setFiles((p) =>
-              p.map((e) => (e.tempId === tempId ? { ...e, progress } : e)),
-            )
-          },
-        )
-      }),
-    )
-  }
-
-  return (
-    <>
-      <div
-        style={{
-          width: '100%',
-          display: 'flex',
-          gap: 8,
-          flexDirection: 'column',
-        }}
-      >
-        <styled.div
-          style={{
-            width: '100%',
-            border: `1px solid ${colors.neutral20}`,
-            borderRadius: radius[12],
-            padding: 8,
-            maxHeight: 360,
-            overflowY: 'auto',
-          }}
-          onDrop={(e) => {
-            e.preventDefault()
-            setDragOver(false)
-
-            const files = e.dataTransfer.files
-            if (!files.length) return
-
-            uploadFiles([...e.dataTransfer.files])
-          }}
-          onDragOver={(e) => {
-            e.preventDefault()
-            setDragOver(true)
-          }}
-          onDragLeave={() => {
-            setDragOver(false)
-          }}
-        >
-          {files.length === 0 ? (
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: 120 - 16 - 2,
-                maxHeight: 512,
-                width: '100%',
-                background: dragOver ? colors.neutral10Adjusted : 'transparent',
-                borderRadius: radius[4],
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 4,
-                  flexDirection: 'column',
-                  color: colors.neutral60,
-                }}
-              >
-                <Icon variant="page" />
-                <Text variant="subtext-medium" color="inherit">
-                  Drag your file(s) here
-                </Text>
-              </div>
-            </div>
-          ) : (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'center',
-                gap: 4,
-              }}
-            >
-              {files.map((file) => (
-                <styled.div
-                  key={file.tempId}
-                  data-menuopen={
-                    itemWithOpenMenuId === file.tempId ? true : undefined
-                  }
-                  style={{
-                    display: 'flex',
-                    height: 44,
-                    alignItems: 'center',
-                    gap: 8,
-                    borderRadius: radius[8],
-                    padding: '0 8px',
-                    '&:hover, &[data-menuopen]': {
-                      background: colors.neutral10Adjusted,
-                    },
-                    '&:hover .menuButton, &[data-menuopen] .menuButton': {
-                      opacity: '100% !important',
-                    },
-                  }}
-                >
-                  <div>
-                    {file.progress < 1 ? (
-                      <Loader value={file.progress * 100} />
-                    ) : (
-                      <Icon variant="page" />
-                    )}
-                  </div>
-
-                  <Text
-                    maxWidth={200}
-                    variant="display-medium"
-                    color="neutral80"
-                  >
-                    {file.name}
-                  </Text>
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      background: colors.neutral60,
-                      borderRadius: radius.full,
-                    }}
-                  />
-                  <Text variant="display-regular" color="neutral60">
-                    {prettyNumber(file.size, 'number-bytes').toUpperCase()}
-                  </Text>
-                  <div
-                    className="menuButton"
-                    style={{ marginLeft: 'auto', opacity: 0, display: 'flex' }}
-                  >
-                    <Menu
-                      onOpenChange={(open) => {
-                        setItemWithOpenMenuId(open ? file.tempId : undefined)
-                      }}
-                    >
-                      <Menu.Trigger>
-                        <IconButton size="small" icon="more-vertical" />
-                      </Menu.Trigger>
-                      <Menu.Items>
-                        <Menu.Item leadIcon="arrow-down">Download</Menu.Item>
-                        <Menu.Item
-                          color="red"
-                          leadIcon="delete"
-                          onClick={() => {
-                            setFiles((p) =>
-                              p.filter((e) => e.tempId !== file.tempId),
-                            )
-                          }}
-                        >
-                          Delete
-                        </Menu.Item>
-                      </Menu.Items>
-                    </Menu>
-                  </div>
-                </styled.div>
-              ))}
-            </div>
-          )}
-        </styled.div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <Button
-            leadIcon="arrow-up"
-            variant="border"
-            onClick={() => {
-              fileInputRef.current?.click()
-            }}
-          >
-            {files.length ? 'Upload another' : 'Upload'}
-          </Button>
-          {!!files.length && (
-            <Button
-              leadIcon="close"
-              variant="border"
-              onClick={() => {
-                dialog({
-                  title: files.length > 1 ? 'Clear all files?' : 'Clear file?',
-                  description:
-                    files.length > 1
-                      ? 'All uploaded and currently uploading files will be removed.'
-                      : 'The file will be removed.',
-                  dismissButtonLabel:
-                    files.length > 1 ? 'Keep files' : 'Keep file',
-                  actionButtonLabel: 'Clear',
-                  color: 'red',
-                  onAction: () => {
-                    setFiles([])
-                  },
-                })
-              }}
-            >
-              {files.length > 1 ? 'Clear all' : 'Clear'}
-            </Button>
-          )}
-        </div>
-      </div>
-      <input
-        style={{
-          position: 'absolute',
-          width: 1,
-          height: 1,
-          padding: 0,
-          margin: -1,
-          overflow: 'hidden',
-          clip: 'rect(0, 0, 0, 0)',
-          whiteSpace: 'nowrap',
-          borderWidth: 0,
-        }}
-        ref={fileInputRef}
-        type="file"
-        multiple
-        onChange={(e) => {
-          const files = e.target.files
-          if (!files.length) return
-
-          uploadFiles([...e.target.files])
-        }}
-      />
-    </>
-  )
-}
-
-export { FileInput }
-export type { FileInptuProps }
diff --git a/src/components/ReferenceInput/index.tsx b/src/components/ReferenceInput/index.tsx
index e391c3d..c4ec05f 100644
--- a/src/components/ReferenceInput/index.tsx
+++ b/src/components/ReferenceInput/index.tsx
@@ -1,5 +1,5 @@
 import { useClient, useQuery } from '@based/react'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Sidebar } from '../Sidebar/index.js'
 import {
   BasedSchemaField,
@@ -14,6 +14,10 @@ import { Modal } from '../Modal/index.js'
 import { Button } from '../Button/index.js'
 import { List } from '../List/index.js'
 import { BasedGrid } from '../Grid/index.js'
+import { Icon } from '../Icon/index.js'
+import { Text } from '../Text/index.js'
+import { radius } from '../../utils/radius.js'
+import { Menu } from '../Menu/index.js'
 
 function generateFinderFieldFromBasedSchemaField(
   key: string,
@@ -118,6 +122,9 @@ function getBasicFinderPropsForType(
   }
 }
 
+// TODO somehow integrate the progress into a loader for when files are uploading
+// this means we might be able to remove the createObjectURL previews. look into figma + list component's rendering
+
 type ReferenceInputProps = {
   type: string
   value?: string[]
@@ -129,7 +136,21 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
   const { data } = useQuery('db:schema')
   const [select, setSelect] = useState<Select>(value)
   const [open, setOpen] = useState(false)
-  const [items, setItems] = useState([])
+  const fileInputRef = useRef<HTMLInputElement>()
+  const [dragOver, setDragOver] = useState(false)
+  const { data: itemsData } = useQuery(value.length ? 'db' : undefined, {
+    items: {
+      $all: true,
+      $list: {
+        $find: {
+          $traverse: value,
+        },
+      },
+    },
+  })
+  const [imagePreviews, setImagePreviews] = useState<{
+    [key: string]: string
+  }>({})
 
   const schema = useMemo(() => {
     if (!data) return
@@ -137,19 +158,32 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
     return convertOldToNew(data)
   }, [data])
 
-  // TODO is this the idiomatic way to fetch all the items? Isn't there a better way which is both less resource intensive and actually subscribes to changes rather than just getting the items?
-  useEffect(() => {
-    Promise.all(
-      value.map((id) => client.call('db:get', { $id: id, $all: true })),
-    ).then((res) => {
-      setItems(res)
-    })
-  }, [value])
-
   useEffect(() => {
     setSelect(value)
   }, [value])
 
+  async function uploadFiles(files: File[]) {
+    const createdIds: string[] = []
+    await Promise.allSettled(
+      files.map(async (file) => {
+        const { id } = await client.call('db:set', { type: 'file' })
+        createdIds.push(id)
+        if (file.type.startsWith('image/')) {
+          setImagePreviews((p) => ({ ...p, [id]: URL.createObjectURL(file) }))
+        }
+        // not awaiting this promise so the outer allSettled can finish once we have all the IDs created and then we can update the UI in a single batch, otherwise if we'd call onChange in here the value of the selected variable would be stale
+        client.stream('db:file-upload', {
+          contents: file,
+          fileName: file.name,
+          mimeType: file.type,
+          payload: { id },
+        })
+      }),
+    )
+    onChange([...select, ...createdIds])
+    fileInputRef.current.value = ''
+  }
+
   return (
     <>
       <div
@@ -161,35 +195,136 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
         }}
       >
         <div style={{ height: 128, width: '100%' }}>
-          <List
-            data={items}
-            fields={
-              schema
-                ? getBasicFinderPropsForType(type, schema.types[type]).fields
-                : []
-            }
-            itemActions={[
-              {
-                label: 'Clear',
-                icon: 'close',
-                color: 'red',
-                onClick: (item) => {
-                  onChange((value ?? []).filter((e) => e !== item.id))
+          {Boolean(value.length) ? (
+            <List
+              data={
+                itemsData?.items
+                  ? itemsData.items.map((e: any) => {
+                      if (imagePreviews[e.id]) {
+                        return { ...e, src: imagePreviews[e.id] }
+                      }
+                      return e
+                    })
+                  : []
+              }
+              fields={
+                schema
+                  ? getBasicFinderPropsForType(type, schema.types[type]).fields
+                  : []
+              }
+              itemActions={[
+                {
+                  label: 'Clear',
+                  icon: 'close',
+                  color: 'red',
+                  onClick: (item) => {
+                    onChange((value ?? []).filter((e) => e !== item.id))
+                  },
                 },
-              },
-            ]}
-          />
+              ]}
+            />
+          ) : (
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+                border: `1px solid ${colors.neutral20Adjusted}`,
+                borderRadius: radius[12],
+                padding: 8,
+              }}
+              onDrop={(e) => {
+                e.preventDefault()
+                setDragOver(false)
+
+                const files = e.dataTransfer.files
+                if (!files.length) return
+
+                uploadFiles([...e.dataTransfer.files])
+              }}
+              onDragOver={(e) => {
+                e.preventDefault()
+                setDragOver(true)
+              }}
+              onDragLeave={() => {
+                setDragOver(false)
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  width: '100%',
+                  height: '100%',
+                  background: dragOver
+                    ? colors.neutral10Adjusted
+                    : 'transparent',
+                  borderRadius: radius[4],
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: 4,
+                    flexDirection: 'column',
+                    color: colors.neutral60,
+                  }}
+                >
+                  {/* TODO correct icon */}
+                  <Icon variant={type === 'file' ? 'page' : 'page'} />
+                  <Text variant="subtext-medium" color="inherit">
+                    {type === 'file'
+                      ? 'Drag your file(s) here'
+                      : 'Add reference(s) to other item(s)'}
+                  </Text>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
         <div style={{ display: 'flex', justifyContent: 'start', gap: 8 }}>
-          <Button
-            variant="border"
-            leadIcon="add"
-            onClick={() => {
-              setOpen(true)
-            }}
-          >
-            Add
-          </Button>
+          {type === 'file' ? (
+            <Menu>
+              <Menu.Trigger>
+                {({ open }) => (
+                  <Button variant="border" leadIcon="add" forceHover={open}>
+                    Add
+                  </Button>
+                )}
+              </Menu.Trigger>
+              <Menu.Items>
+                <Menu.Item
+                  leadIcon="arrow-up"
+                  onClick={() => {
+                    fileInputRef.current.click()
+                  }}
+                >
+                  Upload new
+                </Menu.Item>
+                <Menu.Item
+                  leadIcon="image"
+                  onClick={() => {
+                    setOpen(true)
+                  }}
+                >
+                  Select from uploaded
+                </Menu.Item>
+              </Menu.Items>
+            </Menu>
+          ) : (
+            <Button
+              variant="border"
+              leadIcon="add"
+              onClick={() => {
+                setOpen(true)
+              }}
+            >
+              Add
+            </Button>
+          )}
+
           {Boolean(value?.length) && (
             <Button
               variant="border"
@@ -257,6 +392,30 @@ function ReferenceInput({ type, value = [], onChange }: ReferenceInputProps) {
           </Modal.Actions>
         </Modal>
       )}
+      {type === 'file' && (
+        <input
+          style={{
+            position: 'absolute',
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            borderWidth: 0,
+          }}
+          ref={fileInputRef}
+          type="file"
+          multiple
+          onChange={(e) => {
+            const files = e.target.files
+            if (!files.length) return
+
+            uploadFiles([...e.target.files])
+          }}
+        />
+      )}
     </>
   )
 }
diff --git a/src/index.ts b/src/index.ts
index 48ed18a..8e0dce2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,7 +26,6 @@ export * from './components/Modal/index.js'
 export * from './components/SelectInput/index.js'
 export * from './components/MultiSelect/index.js'
 export * from './components/DateInput/index.js'
-export * from './components/FileInput/index.js'
 export * from './components/Table/index.js'
 export * from './components/ColorInput/index.js'
 export * from './components/Grid/index.js'