From 92331aef1485f25fbba30e5b9eebc9a8c852a15e Mon Sep 17 00:00:00 2001
From: Alexander Thiess <thiess.alexander@googlemail.com>
Date: Sat, 27 Sep 2025 13:07:15 +0200
Subject: [PATCH] updated readme

---
 CLAUDE.md | 26 ++++++++++++++++++++++----
 README.md | 41 +++++++++++++++++++++--------------------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index f4c86e9..3ac9d42 100644
--- a/CLAUDE.md
+++ b/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
diff --git a/README.md b/README.md
index 5655c3b..c673e6d 100644
--- a/README.md
+++ b/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]]):
-    # For multiple files
-    for file in files:
-        print(f"File: {file['name']}, Size: {file['size']}")
-        # Access content with file['content']
+async def handle_upload(name: str, file_type: str, content: bytes):
+    """Handle uploaded file"""
+    print(f"File: {name}, Type: {file_type}, Size: {len(content)} bytes")
+    # Process the file content
+    with open(f'uploads/{name}', 'wb') as f:
+        f.write(content)
 
-def handle_single_file(file: Dict[str, Any]):
-    # For single file mode, returns dict directly
-    print(f"Uploaded: {file['name']}")
-    # Use file['path'] if return_content=False for large files
+# Basic usage
+FileDrop(
+    on_upload=handle_upload,
+    multiple=False,
+    accept='.pdf,.txt,.docx'
+)
 
 # Multiple files
 FileDrop(
-    on_upload=handle_files,
+    on_upload=handle_upload,
     multiple=True,
-    accept='.pdf,.txt,.docx',
-    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
+    accept='image/*'
 )
 ```
 
+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: