updated readme

CLAUDE.md

@@ -13,7 +13,10 @@ src/
       __init__.py
       base.py        # AsyncElement base class
       elements.py    # Pre-built async element types
-chat_input.py        # ChatInput component (to be moved into package)
+    components/
+      __init__.py
+      file_drop.py   # FileDrop and ImageDrop components
+      chat_input.py  # ChatInput component
 ```
 
 ## Key Components
@@ -28,12 +31,27 @@ Provides async-aware UI elements that can perform async operations during initia
 - AsyncExpansion, AsyncCarousel, AsyncMenu
 - And more...
 
-### 2. ChatInput Component
+### 2. Components (`niceguiex.components`)
+
+#### ChatInput
 A textarea component optimized for chat interfaces:
 - Enter to send message
 - Shift+Enter for new line
 - Callback-based message handling
-- Currently in `chat_input.py`, should be moved to package structure
+
+#### FileDrop
+Drag-and-drop file upload component:
+- Visual drag-over feedback
+- Click to browse or drag & drop functionality
+- Async callback support with file name, type, and content
+- Support for single or multiple file uploads
+- Customizable file type filtering
+
+#### ImageDrop
+Specialized FileDrop for images:
+- Returns PIL Image objects
+- Handles image-specific processing
+- Support for single or multiple image uploads
 
 ## Import Convention
 
@@ -41,7 +59,7 @@ The package uses a submodule structure to organize different types of extensions
 
 ```python
 from niceguiex.async_elements import AsyncColumn, AsyncCard
-from chat_input import ChatInput  # To be: from niceguiex.inputs import ChatInput
+from niceguiex.components import ChatInput, FileDrop, ImageDrop
 ```
 
 ## Technical Notes

README.md

@@ -75,38 +75,39 @@ data_table = await DataTable.create(api_endpoint="/api/users")
 ### Additional Components
 
 #### FileDrop
-Drag-and-drop file upload component with customizable styling:
+Drag-and-drop file upload component with visual feedback:
 
 ```python
 from niceguiex.components import FileDrop
 
-def handle_files(files: List[Dict[str, Any]]):
+async def handle_upload(name: str, file_type: str, content: bytes):
-    # For multiple files
+    """Handle uploaded file"""
-    for file in files:
+    print(f"File: {name}, Type: {file_type}, Size: {len(content)} bytes")
-        print(f"File: {file['name']}, Size: {file['size']}")
+    # Process the file content
-        # Access content with file['content']
+    with open(f'uploads/{name}', 'wb') as f:
+        f.write(content)
 
-def handle_single_file(file: Dict[str, Any]):
+# Basic usage
-    # For single file mode, returns dict directly
+FileDrop(
-    print(f"Uploaded: {file['name']}")
+    on_upload=handle_upload,
-    # Use file['path'] if return_content=False for large files
+    multiple=False,
+    accept='.pdf,.txt,.docx'
+)
 
 # Multiple files
 FileDrop(
-    on_upload=handle_files,
+    on_upload=handle_upload,
     multiple=True,
-    accept='.pdf,.txt,.docx',
+    accept='image/*'
-    max_size=5  # 5MB limit
-)
-
-# Single file with temp path (for large files)
-FileDrop(
-    on_upload=handle_single_file,
-    multiple=False,
-    return_content=False  # Returns temp file path instead of content
 )
 ```
 
+Features:
+- Visual drag-over feedback
+- Click to browse or drag & drop
+- Customizable file type filtering
+- Async callback support
+
 #### ImageDrop
 Specialized file drop for images that returns PIL Image objects: