From 5f7cf1f49fc91e413e184a6d210833dc7a6976a3 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 30 Sep 2025 08:54:13 +0800
Subject: [PATCH] Made file upload a separate component

---
 src/components/File/File.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/File/File.tsx b/src/components/File/File.tsx
index 5335f98..6e21c3c 100644
--- a/src/components/File/File.tsx
+++ b/src/components/File/File.tsx
@@ -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>