fastapi-lite-admin 0.1.5__tar.gz → 0.1.7__tar.gz

{fastapi_lite_admin-0.1.5/fastapi_lite_admin.egg-info → fastapi_lite_admin-0.1.7}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-lite-admin
-Version: 0.1.5
+Version: 0.1.7
 Summary: A lightweight, pluggable admin panel for FastAPI
 License: MIT
 Project-URL: Homepage, https://github.com/rishiqwerty/admin-panel-fast-api
@@ -26,13 +26,13 @@ A premium, lightweight, pluggable admin panel for FastAPI and SQLAlchemy.
 ## Screenshots
 
 ### 🖥️ Dashboard / System Overview
-![Dashboard](docs/images/dashboard.png)
+![Dashboard](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/dashboard.png)
 
 ### 📊 Model List View
-![Model List](docs/images/model_list.png)
+![Model List](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/model_list.png)
 
 ### 📝 Edit/Create Record Form
-![Model Form](docs/images/model_form.png)
+![Model Form](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/model_form.png)
 
 ## Features
 
@@ -122,6 +122,7 @@ When calling `admin.register()`, you can configure how each model is represented
 | **`date_field`** | `str` | No | Name of the datetime field (e.g. `created_at`). Required to show the "24h Activity" count cards on the dashboard and lists. |
 | **`attention_filter`** | `SQLAlchemy Expression` | No | A SQLAlchemy binary filter expression (e.g., `User.is_active == False` or `Product.stock < 10`) used to calculate and flag rows that require moderator attention. |
 | **`readonly_fields`** | `List[str]` | No | List of columns that cannot be modified or set via creation or updates (e.g., auto-generated columns or timestamps like `id`, `created_at`). |
+| **`file_fields`** | `List[str]` | No | List of column names that should be treated as file upload fields, rendering a drag-and-drop zone. |
 | **`config`** | `Dict[str, Any]` | No | Dictionary containing extra settings. Supports `"display_name"` to override the sidebar label. |
 
 ---
@@ -141,6 +142,9 @@ The `Admin` class constructor supports the following parameters for customizatio
 | **`dashboard_models`** | `List[str]` | `None` | List of registered model names to display on the dashboard (if you want to restrict which registered models show on the home dashboard). |
 | **`get_logs`** | `Callable` | `None` | An optional callable (async or sync) returning system logs to display on the dashboard activity log feed. |
 | **`logs_config`** | `Dict[str, Any]` | `{"title": "System Activity", "columns": ["level", "timestamp", "message"]}` | Config dictionary to customize dashboard log columns and activity title. |
+| **`upload_dir`** | `str` | `"uploads"` | Local directory path where uploaded files will be stored. |
+| **`upload_url`** | `str` | `"/uploads"` | URL prefix used to serve uploaded files statically. |
+| **`upload_handler`** | `Callable` | `None` | Optional custom upload handler callback for buckets (S3, GCS, Azure). |
 
 ---
 
@@ -204,6 +208,49 @@ admin = Admin(
 )
 ```
 
+## File Uploads & Cloud Storage
+
+`FastAPI Lite Admin` supports rendering drag-and-drop file uploads for designated string fields (e.g., image paths or document URLs).
+
+### 1. Default Local Storage
+By default, uploaded files are stored locally in the `uploads/` directory and served statically:
+
+```python
+admin = Admin(
+    title="My Admin",
+    upload_dir="my_uploads",   # Stored in project-root/my_uploads
+    upload_url="/static/files" # Served statically at http://localhost:8000/static/files
+)
+```
+
+### 2. Cloud Storage / Buckets (S3, GCS, Azure, etc.)
+If you are deploying to production and storing files in a cloud bucket, you can plug in a custom `upload_handler`:
+
+```python
+from fastapi import UploadFile
+
+async def my_s3_upload_handler(file: UploadFile) -> str:
+    # 1. Upload file.file to S3, GCS, Cloudinary, etc.
+    # 2. Return the public URL to be stored in the database
+    return f"https://my-bucket.s3.amazonaws.com/{file.filename}"
+
+admin = Admin(
+    title="Cloud Admin",
+    upload_handler=my_s3_upload_handler
+)
+```
+
+### 3. Enabling File Upload in Models
+Pass the `file_fields` parameter when registering your model:
+
+```python
+admin.register(
+    model=Product,
+    get_db=get_db,
+    file_fields=["image_url"] # These will render as drag-and-drop zones
+)
+```
+
 ---
 
 ## Running the Example Application

{fastapi_lite_admin-0.1.5 → fastapi_lite_admin-0.1.7}/README.md

@@ -5,13 +5,13 @@ A premium, lightweight, pluggable admin panel for FastAPI and SQLAlchemy.
 ## Screenshots
 
 ### 🖥️ Dashboard / System Overview
-![Dashboard](docs/images/dashboard.png)
+![Dashboard](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/dashboard.png)
 
 ### 📊 Model List View
-![Model List](docs/images/model_list.png)
+![Model List](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/model_list.png)
 
 ### 📝 Edit/Create Record Form
-![Model Form](docs/images/model_form.png)
+![Model Form](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/model_form.png)
 
 ## Features
 
@@ -101,6 +101,7 @@ When calling `admin.register()`, you can configure how each model is represented
 | **`date_field`** | `str` | No | Name of the datetime field (e.g. `created_at`). Required to show the "24h Activity" count cards on the dashboard and lists. |
 | **`attention_filter`** | `SQLAlchemy Expression` | No | A SQLAlchemy binary filter expression (e.g., `User.is_active == False` or `Product.stock < 10`) used to calculate and flag rows that require moderator attention. |
 | **`readonly_fields`** | `List[str]` | No | List of columns that cannot be modified or set via creation or updates (e.g., auto-generated columns or timestamps like `id`, `created_at`). |
+| **`file_fields`** | `List[str]` | No | List of column names that should be treated as file upload fields, rendering a drag-and-drop zone. |
 | **`config`** | `Dict[str, Any]` | No | Dictionary containing extra settings. Supports `"display_name"` to override the sidebar label. |
 
 ---
@@ -120,6 +121,9 @@ The `Admin` class constructor supports the following parameters for customizatio
 | **`dashboard_models`** | `List[str]` | `None` | List of registered model names to display on the dashboard (if you want to restrict which registered models show on the home dashboard). |
 | **`get_logs`** | `Callable` | `None` | An optional callable (async or sync) returning system logs to display on the dashboard activity log feed. |
 | **`logs_config`** | `Dict[str, Any]` | `{"title": "System Activity", "columns": ["level", "timestamp", "message"]}` | Config dictionary to customize dashboard log columns and activity title. |
+| **`upload_dir`** | `str` | `"uploads"` | Local directory path where uploaded files will be stored. |
+| **`upload_url`** | `str` | `"/uploads"` | URL prefix used to serve uploaded files statically. |
+| **`upload_handler`** | `Callable` | `None` | Optional custom upload handler callback for buckets (S3, GCS, Azure). |
 
 ---
 
@@ -183,6 +187,49 @@ admin = Admin(
 )
 ```
 
+## File Uploads & Cloud Storage
+
+`FastAPI Lite Admin` supports rendering drag-and-drop file uploads for designated string fields (e.g., image paths or document URLs).
+
+### 1. Default Local Storage
+By default, uploaded files are stored locally in the `uploads/` directory and served statically:
+
+```python
+admin = Admin(
+    title="My Admin",
+    upload_dir="my_uploads",   # Stored in project-root/my_uploads
+    upload_url="/static/files" # Served statically at http://localhost:8000/static/files
+)
+```
+
+### 2. Cloud Storage / Buckets (S3, GCS, Azure, etc.)
+If you are deploying to production and storing files in a cloud bucket, you can plug in a custom `upload_handler`:
+
+```python
+from fastapi import UploadFile
+
+async def my_s3_upload_handler(file: UploadFile) -> str:
+    # 1. Upload file.file to S3, GCS, Cloudinary, etc.
+    # 2. Return the public URL to be stored in the database
+    return f"https://my-bucket.s3.amazonaws.com/{file.filename}"
+
+admin = Admin(
+    title="Cloud Admin",
+    upload_handler=my_s3_upload_handler
+)
+```
+
+### 3. Enabling File Upload in Models
+Pass the `file_fields` parameter when registering your model:
+
+```python
+admin.register(
+    model=Product,
+    get_db=get_db,
+    file_fields=["image_url"] # These will render as drag-and-drop zones
+)
+```
+
 ---
 
 ## Running the Example Application

{fastapi_lite_admin-0.1.5 → fastapi_lite_admin-0.1.7}/fastapi_admin_lite/main.py

@@ -16,7 +16,10 @@ class Admin:
         dashboard_template: Optional[str] = None,
         dashboard_models: Optional[List[str]] = None,
         get_logs: Optional[Callable] = None,
-        logs_config: Optional[Dict[str, Any]] = None
+        logs_config: Optional[Dict[str, Any]] = None,
+        upload_dir: str = "uploads",
+        upload_url: str = "/uploads",
+        upload_handler: Optional[Callable[[Any], Any]] = None
     ):
         self.title = title
         self.base_url = base_url
@@ -30,6 +33,9 @@ class Admin:
             "columns": ["level", "timestamp", "message"],
             "title": "System Activity"
         }
+        self.upload_dir = upload_dir
+        self.upload_url = upload_url
+        self.upload_handler = upload_handler
         
         # Auth & Permissions
         self.auth_dependency = auth_dependency
@@ -53,6 +59,7 @@ class Admin:
         date_field: Optional[str] = None,
         attention_filter: Optional[Any] = None,
         readonly_fields: Optional[List[str]] = None,
+        file_fields: Optional[List[str]] = None,
         config: Optional[Dict[str, Any]] = None
     ):
         """
@@ -73,6 +80,9 @@ class Admin:
             
         if readonly_fields:
             config["readonly_fields"] = readonly_fields
+
+        if file_fields:
+            config["file_fields"] = file_fields
             
         self.registry.register(model, get_db, config)
 
@@ -80,6 +90,14 @@ class Admin:
         """
         Mount the admin router to the FastAPI application.
         """
+        # Mount upload directory for static access if using default storage
+        if not self.upload_handler:
+            import os
+            from fastapi.staticfiles import StaticFiles
+            if not os.path.exists(self.upload_dir):
+                os.makedirs(self.upload_dir)
+            app.mount(self.upload_url, StaticFiles(directory=self.upload_dir), name="admin_uploads")
+
         # Collect all dependencies
         all_deps = list(self.dependencies)
         if self.auth_dependency:

{fastapi_lite_admin-0.1.5 → fastapi_lite_admin-0.1.7}/fastapi_admin_lite/routers/admin.py

@@ -1,5 +1,9 @@
 from typing import Any, Dict, List
-from fastapi import APIRouter, Depends, HTTPException, Query
+from fastapi import APIRouter, Depends, HTTPException, Query, UploadFile, File
+import shutil
+import uuid
+import os
+import asyncio
 from sqlalchemy.ext.asyncio import AsyncSession
 from ..core.schema import generate_admin_schema
 from ..core.crud import CRUDEngine
@@ -11,6 +15,33 @@ def create_admin_router(admin: Any) -> APIRouter:
     async def get_schema():
         return generate_admin_schema(admin.registry)
 
+    @router.post("/upload", name="admin_upload_file")
+    async def upload_file(file: UploadFile = File(...)):
+        if admin.upload_handler:
+            try:
+                if asyncio.iscoroutinefunction(admin.upload_handler):
+                    url = await admin.upload_handler(file)
+                else:
+                    url = admin.upload_handler(file)
+                return {"url": url}
+            except Exception as e:
+                raise HTTPException(status_code=500, detail=f"Custom upload failed: {str(e)}")
+        else:
+            if not os.path.exists(admin.upload_dir):
+                os.makedirs(admin.upload_dir)
+            
+            ext = os.path.splitext(file.filename)[1]
+            filename = f"{uuid.uuid4()}{ext}"
+            filepath = os.path.join(admin.upload_dir, filename)
+            
+            try:
+                with open(filepath, "wb") as buffer:
+                    shutil.copyfileobj(file.file, buffer)
+            except Exception as e:
+                raise HTTPException(status_code=500, detail=f"Could not save file: {str(e)}")
+                
+            return {"url": f"{admin.upload_url}/{filename}"}
+
     @router.get("/models")
     async def list_models():
         return list(admin.registry.get_models().keys())

{fastapi_lite_admin-0.1.5 → fastapi_lite_admin-0.1.7}/fastapi_admin_lite/ui/templates/model_detail.html

@@ -142,6 +142,12 @@
 
     async function loadDetail() {
         try {
+            // Fetch schema to check file fields
+            const schemaResponse = await fetch(`${apiBaseUrl}/schema`);
+            const schema = await schemaResponse.json();
+            const modelSchema = schema.models.find(m => m.name === modelName);
+            const fileFields = modelSchema?.config?.file_fields || [];
+
             const response = await fetch(`${apiBaseUrl}/${modelName}/${recordId}`);
             const data = await response.json();
             
@@ -150,10 +156,34 @@
             
             container.innerHTML = keys.map(key => {
                 const val = data[key];
-                const isFullWidth = typeof val === 'string' && val.length > 50;
+                
+                const isFile = fileFields.includes(key);
+                const isFullWidth = (typeof val === 'string' && val.length > 50) || isFile;
                 
                 let displayVal = val;
-                if (typeof val === 'boolean' || key === 'is_active') {
+                if (isFile) {
+                    if (!val) {
+                        displayVal = '<span style="color: var(--text-muted);">None</span>';
+                    } else {
+                        const isImg = val.match(/\.(jpeg|jpg|gif|png|webp)$/i);
+                        if (isImg) {
+                            displayVal = `
+                                <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 8px;">
+                                    <img src="${val}" alt="${key}" style="max-width: 300px; max-height: 300px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border);">
+                                    <a href="${val}" target="_blank" class="file-preview-link" style="color: var(--primary); text-decoration: none; font-size: 0.85rem; font-weight: 500;">
+                                        <i class="fas fa-external-link-alt"></i> View full size
+                                    </a>
+                                </div>
+                            `;
+                        } else {
+                            displayVal = `
+                                <a href="${val}" target="_blank" class="file-preview-link" style="display: inline-flex; align-items: center; gap: 8px; color: var(--primary); text-decoration: none; font-weight: 500; margin-top: 4px;">
+                                    <i class="fas fa-file-alt" style="font-size: 1.25rem;"></i> View File (${val.split('/').pop()})
+                                </a>
+                            `;
+                        }
+                    }
+                } else if (typeof val === 'boolean' || key === 'is_active') {
                     const isActive = val === true || val === 'true';
                     displayVal = `<span class="status-pill ${isActive ? 'active' : 'inactive'}">
                                     <i class="fas ${isActive ? 'fa-check-circle' : 'fa-times-circle'}"></i>

{fastapi_lite_admin-0.1.5 → fastapi_lite_admin-0.1.7}/fastapi_admin_lite/ui/templates/model_form.html

@@ -188,6 +188,148 @@
         font-weight: 600;
         color: var(--text-main);
     }
+
+    /* File Upload Styling */
+    .file-upload-wrapper {
+        position: relative;
+        width: 100%;
+    }
+
+    .file-upload-dragzone {
+        border: 2px dashed var(--border);
+        border-radius: 12px;
+        padding: 32px 20px;
+        text-align: center;
+        background-color: var(--bg-card);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .file-upload-dragzone:hover {
+        border-color: var(--primary);
+        background-color: rgba(99, 102, 241, 0.02);
+    }
+
+    .file-upload-dragzone.dragover {
+        border-color: var(--primary);
+        background-color: rgba(99, 102, 241, 0.06);
+        transform: scale(0.99);
+    }
+
+    .file-upload-dragzone.hidden {
+        display: none;
+    }
+
+    .upload-zone-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .upload-icon {
+        font-size: 2rem;
+        color: var(--text-muted);
+        transition: color 0.3s ease;
+    }
+
+    .file-upload-dragzone:hover .upload-icon {
+        color: var(--primary);
+        transform: translateY(-2px);
+    }
+
+    .upload-text {
+        font-size: 0.9rem;
+        font-weight: 500;
+        color: var(--text-main);
+    }
+
+    .browse-text {
+        color: var(--primary);
+        font-weight: 600;
+    }
+
+    .upload-hint {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+    }
+
+    /* File Indicator (No Preview) */
+    .file-preview-container {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 16px;
+        background-color: var(--bg-card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        position: relative;
+        margin-top: 8px;
+    }
+
+    .file-preview-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 8px;
+        background-color: var(--bg-surface);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        color: var(--primary);
+        border: 1px solid var(--border);
+    }
+
+    .file-preview-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex: 1;
+        min-width: 0;
+    }
+
+    .file-preview-name {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--text-main);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .file-preview-link {
+        font-size: 0.75rem;
+        color: var(--primary);
+        text-decoration: none;
+        font-weight: 500;
+    }
+
+    .file-preview-link:hover {
+        text-decoration: underline;
+    }
+
+    .btn-remove-file {
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        padding: 8px;
+        font-size: 1rem;
+        transition: color 0.2s;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .btn-remove-file:hover {
+        color: var(--error);
+        background-color: rgba(239, 68, 68, 0.1);
+    }
 {% endblock %}
 
 {% block content %}
@@ -274,6 +416,8 @@
 
             const container = document.getElementById('form-fields');
             const readonlyFields = modelSchema.config?.readonly_fields || [];
+            const fileFields = modelSchema.config?.file_fields || [];
+            
             container.innerHTML = modelSchema.fields.map(field => {
                 const name = field.name;
                 const type = field.type.toLowerCase();
@@ -285,6 +429,7 @@
                 if (name === 'id') return `<input type="hidden" name="id" value="${initialData[name]}">`;
                 
                 const val = initialData[name] !== undefined ? initialData[name] : '';
+                const isRequired = field.required;
                 
                 if (isBoolean) {
                     const checked = val === true || val === 'true' ? 'checked' : '';
@@ -304,8 +449,46 @@
                     `;
                 }
 
+                const isFile = fileFields.includes(name);
+                if (isFile) {
+                    const previewHtml = val ? `
+                        <div class="file-preview-container" id="preview-${name}">
+                            <div class="file-preview-icon"><i class="fas fa-file-alt"></i></div>
+                            <div class="file-preview-info">
+                                <span class="file-preview-name">${val.split('/').pop()}</span>
+                                <a href="${val}" target="_blank" class="file-preview-link">View file</a>
+                            </div>
+                            <button type="button" class="btn-remove-file" onclick="clearFile('${name}')">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                    ` : '';
+                    
+                    return `
+                        <div class="form-group full-width">
+                            <label class="form-label">
+                                ${name.replace('_', ' ')}
+                                ${isRequired ? '<span style="color: var(--error); margin-left: 4px;">*</span>' : ''}
+                            </label>
+                            <div class="file-upload-wrapper">
+                                <input type="hidden" id="input-hidden-${name}" name="${name}" value="${val}" ${isRequired ? 'required' : ''}>
+                                <div class="file-upload-dragzone ${val ? 'hidden' : ''}" id="dragzone-${name}" onclick="document.getElementById('input-file-${name}').click()">
+                                    <div class="upload-zone-content">
+                                        <i class="fas fa-cloud-upload-alt upload-icon"></i>
+                                        <div class="upload-text">Drag & drop a file here, or <span class="browse-text">browse</span></div>
+                                        <div class="upload-hint">Supports any file type</div>
+                                    </div>
+                                </div>
+                                <input type="file" id="input-file-${name}" class="hidden-file-input" style="display: none;" onchange="handleFileSelect(event, '${name}')" ${disabled}>
+                                <div id="preview-wrapper-${name}">
+                                    ${previewHtml}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }
+
                 const isFullWidth = name.includes('description') || name.includes('content');
-                const isRequired = field.required;
                 
                 return `
                     <div class="form-group ${isFullWidth ? 'full-width' : ''}">
@@ -320,6 +503,11 @@
                     </div>
                 `;
             }).join('');
+
+            // Setup drag & drop for file fields
+            fileFields.forEach(name => {
+                setupDragAndDrop(name);
+            });
         } catch (error) {
             console.error('Error loading form:', error);
         }
@@ -364,6 +552,115 @@
         }
     };
 
+    async function handleFileSelect(event, fieldName) {
+        const file = event.target.files[0];
+        if (!file) return;
+        await uploadFile(file, fieldName);
+    }
+
+    async function uploadFile(file, fieldName) {
+        const dragzone = document.getElementById(`dragzone-${fieldName}`);
+        const previewWrapper = document.getElementById(`preview-wrapper-${fieldName}`);
+        const hiddenInput = document.getElementById(`input-hidden-${fieldName}`);
+        
+        // Show uploading state in the dragzone
+        const originalContent = dragzone.innerHTML;
+        dragzone.innerHTML = `
+            <div class="upload-zone-content">
+                <i class="fas fa-spinner fa-spin upload-icon" style="color: var(--primary);"></i>
+                <div class="upload-text">Uploading ${file.name}...</div>
+            </div>
+        `;
+        
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        try {
+            const response = await fetch(`${apiBaseUrl}/upload`, {
+                method: 'POST',
+                body: formData
+            });
+            
+            if (!response.ok) {
+                throw new Error('Upload failed');
+            }
+            
+            const result = await response.json();
+            const fileUrl = result.url;
+            
+            // Set value in hidden input
+            hiddenInput.value = fileUrl;
+            
+            // Update preview
+            previewWrapper.innerHTML = `
+                <div class="file-preview-container" id="preview-${fieldName}">
+                    <div class="file-preview-icon"><i class="fas fa-file-alt"></i></div>
+                    <div class="file-preview-info">
+                        <span class="file-preview-name">${file.name}</span>
+                        <a href="${fileUrl}" target="_blank" class="file-preview-link">View file</a>
+                    </div>
+                    <button type="button" class="btn-remove-file" onclick="clearFile('${fieldName}')">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            `;
+            
+            // Hide dragzone
+            dragzone.classList.add('hidden');
+        } catch (error) {
+            console.error('Error uploading file:', error);
+            alert('Failed to upload file: ' + error.message);
+            // Restore dragzone
+            dragzone.innerHTML = originalContent;
+        }
+    }
+
+    function clearFile(fieldName) {
+        const dragzone = document.getElementById(`dragzone-${fieldName}`);
+        const previewWrapper = document.getElementById(`preview-wrapper-${fieldName}`);
+        const hiddenInput = document.getElementById(`input-hidden-${fieldName}`);
+        
+        hiddenInput.value = '';
+        previewWrapper.innerHTML = '';
+        dragzone.classList.remove('hidden');
+        
+        // Reset file input value so same file can be selected again
+        const fileInput = document.getElementById(`input-file-${fieldName}`);
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    }
+
+    // Setup drag and drop for a dragzone
+    function setupDragAndDrop(fieldName) {
+        const dragzone = document.getElementById(`dragzone-${fieldName}`);
+        if (!dragzone) return;
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dragzone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dragzone.classList.add('dragover');
+            }, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dragzone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                dragzone.classList.remove('dragover');
+            }, false);
+        });
+
+        dragzone.addEventListener('drop', async (e) => {
+            const dt = e.dataTransfer;
+            const file = dt.files[0];
+            if (file) {
+                await uploadFile(file, fieldName);
+            }
+        }, false);
+    }
+
     loadForm();
 </script>
 {% endblock %}

{fastapi_lite_admin-0.1.5 → fastapi_lite_admin-0.1.7/fastapi_lite_admin.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: fastapi-lite-admin
-Version: 0.1.5
+Version: 0.1.7
 Summary: A lightweight, pluggable admin panel for FastAPI
 License: MIT
 Project-URL: Homepage, https://github.com/rishiqwerty/admin-panel-fast-api
@@ -26,13 +26,13 @@ A premium, lightweight, pluggable admin panel for FastAPI and SQLAlchemy.
 ## Screenshots
 
 ### 🖥️ Dashboard / System Overview
-![Dashboard](docs/images/dashboard.png)
+![Dashboard](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/dashboard.png)
 
 ### 📊 Model List View
-![Model List](docs/images/model_list.png)
+![Model List](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/model_list.png)
 
 ### 📝 Edit/Create Record Form
-![Model Form](docs/images/model_form.png)
+![Model Form](https://raw.githubusercontent.com/rishiqwerty/admin-panel-fast-api/add-docs-for-setting-up-admin-panel/docs/images/model_form.png)
 
 ## Features
 
@@ -122,6 +122,7 @@ When calling `admin.register()`, you can configure how each model is represented
 | **`date_field`** | `str` | No | Name of the datetime field (e.g. `created_at`). Required to show the "24h Activity" count cards on the dashboard and lists. |
 | **`attention_filter`** | `SQLAlchemy Expression` | No | A SQLAlchemy binary filter expression (e.g., `User.is_active == False` or `Product.stock < 10`) used to calculate and flag rows that require moderator attention. |
 | **`readonly_fields`** | `List[str]` | No | List of columns that cannot be modified or set via creation or updates (e.g., auto-generated columns or timestamps like `id`, `created_at`). |
+| **`file_fields`** | `List[str]` | No | List of column names that should be treated as file upload fields, rendering a drag-and-drop zone. |
 | **`config`** | `Dict[str, Any]` | No | Dictionary containing extra settings. Supports `"display_name"` to override the sidebar label. |
 
 ---
@@ -141,6 +142,9 @@ The `Admin` class constructor supports the following parameters for customizatio
 | **`dashboard_models`** | `List[str]` | `None` | List of registered model names to display on the dashboard (if you want to restrict which registered models show on the home dashboard). |
 | **`get_logs`** | `Callable` | `None` | An optional callable (async or sync) returning system logs to display on the dashboard activity log feed. |
 | **`logs_config`** | `Dict[str, Any]` | `{"title": "System Activity", "columns": ["level", "timestamp", "message"]}` | Config dictionary to customize dashboard log columns and activity title. |
+| **`upload_dir`** | `str` | `"uploads"` | Local directory path where uploaded files will be stored. |
+| **`upload_url`** | `str` | `"/uploads"` | URL prefix used to serve uploaded files statically. |
+| **`upload_handler`** | `Callable` | `None` | Optional custom upload handler callback for buckets (S3, GCS, Azure). |
 
 ---
 
@@ -204,6 +208,49 @@ admin = Admin(
 )
 ```
 
+## File Uploads & Cloud Storage
+
+`FastAPI Lite Admin` supports rendering drag-and-drop file uploads for designated string fields (e.g., image paths or document URLs).
+
+### 1. Default Local Storage
+By default, uploaded files are stored locally in the `uploads/` directory and served statically:
+
+```python
+admin = Admin(
+    title="My Admin",
+    upload_dir="my_uploads",   # Stored in project-root/my_uploads
+    upload_url="/static/files" # Served statically at http://localhost:8000/static/files
+)
+```
+
+### 2. Cloud Storage / Buckets (S3, GCS, Azure, etc.)
+If you are deploying to production and storing files in a cloud bucket, you can plug in a custom `upload_handler`:
+
+```python
+from fastapi import UploadFile
+
+async def my_s3_upload_handler(file: UploadFile) -> str:
+    # 1. Upload file.file to S3, GCS, Cloudinary, etc.
+    # 2. Return the public URL to be stored in the database
+    return f"https://my-bucket.s3.amazonaws.com/{file.filename}"
+
+admin = Admin(
+    title="Cloud Admin",
+    upload_handler=my_s3_upload_handler
+)
+```
+
+### 3. Enabling File Upload in Models
+Pass the `file_fields` parameter when registering your model:
+
+```python
+admin.register(
+    model=Product,
+    get_db=get_db,
+    file_fields=["image_url"] # These will render as drag-and-drop zones
+)
+```
+
 ---
 
 ## Running the Example Application

{fastapi_lite_admin-0.1.5 → fastapi_lite_admin-0.1.7}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "fastapi-lite-admin"
-version = "0.1.5"
+version = "0.1.7"
 description = "A lightweight, pluggable admin panel for FastAPI"
 readme = "README.md"
 requires-python = ">=3.9"