PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made file upload a separate component

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-30 08:54:13 +08:00
parent 2510353fbf
commit 5f7cf1f49f
1 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/File/File.tsx
View file

@ -1,11 +1,20 @@
import './File.sass'
import { FileField } from '@kobalte/core/file-field'
export default () => {
interface Props {
maxFiles: number
accept: string
onFileAccept?: (files: File[]) => void
label: string
buttonText: string
onClick: () => void
}
export default (props: Props) => {
return (
<>
<FileField class="filefield" maxFiles={1} onFileAccept={(data) => console.log('data', data)} onFileReject={(data) => console.log('data', data)} onFileChange={(data) => console.log('data', data)}>
<FileField.Dropzone class="filefield__dropzone">Drag and drop or click to upload file</FileField.Dropzone>
<FileField class="filefield" maxFiles={props.maxFiles} onFileAccept={props.onFileAccept} accept={props.accept}>
<FileField.Dropzone class="filefield__dropzone">{props.label}</FileField.Dropzone>
<FileField.HiddenInput />
<FileField.ItemList class="filefield__itemList">
{() => (
@ -13,7 +22,9 @@ export default () => {
<FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
<FileField.ItemName class="filefield__itemName" />
<FileField.ItemSize class="filefield__itemSize" />
<FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger">Delete</FileField.ItemDeleteTrigger>
<FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger" onClick={props.onClick}>
{props.buttonText}
</FileField.ItemDeleteTrigger>
</FileField.Item>
)}
</FileField.ItemList>