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

Added file upload component

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-24 16:12:22 +08:00
parent 9f2d80933d
commit 69245a0ea0
3 changed files with 138 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/File/File.tsx Normal file
View file

@ -0,0 +1,23 @@
import './File.sass'
import { FileField } from '@kobalte/core/file-field'
export default () => {
return (
<>
<FileField class="filefield" multiple 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 file here or click to upload file</FileField.Dropzone>
<FileField.HiddenInput />
<FileField.ItemList class="filefield__itemList">
{() => (
<FileField.Item class="filefield__item">
<FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
<FileField.ItemName class="filefield__itemName" />
<FileField.ItemSize class="filefield__itemSize" />
<FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger">Delete</FileField.ItemDeleteTrigger>
</FileField.Item>
)}
</FileField.ItemList>
</FileField>
</>
)
}