add inline file input

src/components/InlineFileInput/InlineFileInput.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { InlineFileInput } from './index.js'
+import { useClient } from '@based/react'
+import { useToast } from '../Toast/index.js'
+
+export default {
+  title: 'InlineFileInput',
+  component: InlineFileInput,
+}
+
+export const Default = () => {
+  const client = useClient()
+  const toast = useToast()
+  return (
+    <>
+      <InlineFileInput
+        onChange={async (files) => {
+          await Promise.allSettled(
+            files.map(async (file) => {
+              const res = await client.stream('db:file-upload', {
+                contents: file,
+                fileName: file.name,
+                mimeType: file.type,
+              })
+              toast(`✅ uploaded file: ${JSON.stringify(res)}`)
+            }),
+          )
+        }}
+      >
+        Upload a file
+      </InlineFileInput>
+      <InlineFileInput
+        multiple
+        onChange={async (files) => {
+          await Promise.allSettled(
+            files.map(async (file) => {
+              const res = await client.stream('db:file-upload', {
+                contents: file,
+                fileName: file.name,
+                mimeType: file.type,
+              })
+              toast(`✅ uploaded file: ${JSON.stringify(res)}`)
+            }),
+          )
+        }}
+      >
+        Upload multiple files
+      </InlineFileInput>
+    </>
+  )
+}

src/components/InlineFileInput/index.tsx

@@ -0,0 +1,70 @@
+import { useRef, useState } from 'react'
+import { Button, ButtonProps } from '../Button/index.js'
+import { useToast } from '../Toast/index.js'
+
+type InlineFileInputProps = {
+  multiple?: boolean
+  onChange: (value: File[]) => void | Promise<void>
+} & Omit<ButtonProps, 'onClick' | 'loading'>
+
+function InlineFileInput({
+  multiple = false,
+  onChange,
+  ...buttonProps
+}: InlineFileInputProps) {
+  const [loading, setLoading] = useState(false)
+  const ref = useRef<HTMLInputElement>()
+  const toast = useToast()
+
+  console.log(loading)
+
+  return (
+    <>
+      <Button
+        {...buttonProps}
+        onClick={() => {
+          ref.current.click()
+        }}
+        loading={loading}
+      />
+      <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={ref}
+        type="file"
+        multiple={multiple}
+        onChange={async (e) => {
+          if (!e.target.files.length) return
+          const files = [...e.target.files]
+
+          try {
+            const result = onChange(files)
+
+            if (result instanceof Promise) {
+              console.log('promiset ad az onchange')
+              setLoading(true)
+              await result
+            }
+          } catch {
+            toast(`Upload failed: ${e}`, { color: 'red' })
+          } finally {
+            setLoading(false)
+            e.target.value = ''
+          }
+        }}
+      />
+    </>
+  )
+}
+
+export { InlineFileInput }
+export type { InlineFileInputProps }

src/index.ts

@@ -37,6 +37,7 @@ export * from './components/Note/index.js'
 export * from './components/Calendar/index.js'
 export * from './components/List/index.js'
 export * from './components/ReferencesInput/index.js'
+export * from './components/InlineFileInput/index.js'
 export * from './components/Tabs/index.js'
 export * from './hooks/useTheme.js'
 export * from './hooks/useRerender.js'