Merge branch 'main' of github.com:zauberzeug/nicegui

nicegui/client.py

@@ -80,6 +80,7 @@ def build_response(self, request: Request, status_code: int = 200) -> Response:
             'favicon_url': get_favicon_url(self.page, prefix),
             'dark': str(self.page.resolve_dark()),
             'prefix': prefix,
+            'tailwind': globals.tailwind,
             'socket_io_js_extra_headers': globals.socket_io_js_extra_headers,
         }, status_code, {'Cache-Control': 'no-store', 'X-NiceGUI-Content': 'page'})
 

nicegui/elements/upload.py

@@ -1,45 +1,47 @@
-from typing import Callable, Dict, Optional
+from typing import Callable, Optional
 
-from ..dependencies import register_component
-from ..element import Element
-from ..events import UploadEventArguments, UploadFile, handle_event
+from fastapi import Request, Response
 
-register_component('upload', __file__, 'upload.vue')
+from ..element import Element
+from ..events import UploadEventArguments, handle_event
+from ..nicegui import app
 
 
 class Upload(Element):
 
     def __init__(self, *,
                  multiple: bool = False,
                  on_upload: Optional[Callable] = None,
-                 file_picker_label: str = '',
-                 upload_button_icon: str = 'file_upload') -> None:
+                 label: str = '',
+                 auto_upload: bool = False,
+                 ) -> None:
         """File Upload
 
+        Based on Quasar's `QUploader <https://quasar.dev/vue-components/uploader>`_ component.
+
         :param multiple: allow uploading multiple files at once (default: `False`)
-        :param on_upload: callback to execute when a file is uploaded (list of bytearrays)
-        :param file_picker_label: label for the file picker element
-        :param upload_button_icon: icon for the upload button
+        :param on_upload: callback to execute for each uploaded file (type: nicegui.events.UploadEventArguments)
+        :param label: label for the uploader (default: `''`)
+        :param auto_upload: automatically upload files when they are selected (default: `False`)
         """
-        super().__init__('upload')
-        self.classes('row items-center gap-2')
+        super().__init__('q-uploader')
         self._props['multiple'] = multiple
-        self._props['file_picker_label'] = file_picker_label
-        self._props['upload_button_icon'] = upload_button_icon
-
-        def upload(msg: Dict) -> None:
-            files = [
-                UploadFile(
-                    content=file['content'],
-                    name=file['name'],
-                    lastModified=file['lastModified'],
-                    size=file['size'],
-                    type=file['type'],
+        self._props['label'] = label
+        self._props['auto-upload'] = auto_upload
+        self._props['url'] = f'/_nicegui/client/{self.client.id}/upload/{self.id}'
+
+        @app.post(f'/_nicegui/client/{self.client.id}/upload/{self.id}')
+        async def upload_route(request: Request) -> Response:
+            for data in (await request.form()).values():
+                args = UploadEventArguments(
+                    sender=self,
+                    client=self.client,
+                    content=data.file,
+                    name=data.filename,
+                    type=data.content_type,
                 )
-                for file in msg['args']
-            ]
-            handle_event(on_upload, UploadEventArguments(sender=self, client=self.client, files=files))
-        self.on('upload', upload)
+                handle_event(on_upload, args)
+            return {'upload': 'success'}
 
     def reset(self) -> None:
         self.run_method('reset')

nicegui/events.py

@@ -1,7 +1,7 @@
 import traceback
 from dataclasses import dataclass
 from inspect import signature
-from typing import TYPE_CHECKING, Any, Callable, List, Optional
+from typing import TYPE_CHECKING, Any, BinaryIO, Callable, List, Optional
 
 from . import globals
 from .async_updater import AsyncUpdater
@@ -65,19 +65,12 @@ class JoystickEventArguments(EventArguments):
 
 
 @dataclass
-class UploadFile:
-    content: bytes
+class UploadEventArguments(EventArguments):
+    content: BinaryIO
     name: str
-    lastModified: float
-    size: int
     type: str
 
 
-@dataclass
-class UploadEventArguments(EventArguments):
-    files: List[UploadFile]
-
-
 @dataclass
 class ValueChangeEventArguments(EventArguments):
     value: Any

nicegui/globals.py

@@ -35,6 +35,7 @@ class State(Enum):
 dark: Optional[bool]
 binding_refresh_interval: float
 excludes: List[str]
+tailwind: bool
 socket_io_js_extra_headers: Dict = {}
 
 _socket_id: Optional[str] = None

nicegui/run.py

@@ -26,6 +26,7 @@ def run(*,
         uvicorn_reload_includes: str = '*.py',
         uvicorn_reload_excludes: str = '.*, .py[cod], .sw.*, ~*',
         exclude: str = '',
+        tailwind: bool = True,
         ) -> None:
     '''ui.run
 
@@ -45,6 +46,7 @@ def run(*,
     :param uvicorn_reload_excludes: string with comma-separated list of glob-patterns which should be ignored for reload (default: `'.*, .py[cod], .sw.*, ~*'`)
     :param exclude: comma-separated string to exclude elements (with corresponding JavaScript libraries) to save bandwidth
       (possible entries: chart, colors, interactive_image, joystick, keyboard, log, scene, upload, table)
+    :param tailwind: whether to use Tailwind (default: `True`)
     '''
     globals.host = host
     globals.port = port
@@ -54,6 +56,7 @@ def run(*,
     globals.dark = dark
     globals.binding_refresh_interval = binding_refresh_interval
     globals.excludes = [e.strip() for e in exclude.split(',')]
+    globals.tailwind = tailwind
 
     if inspect.stack()[-2].filename.endswith('spawn.py'):
         return

nicegui/templates/index.html

@@ -6,8 +6,9 @@
     <link href="{{ favicon_url }}" rel="shortcut icon" />
     <link href="{{ prefix | safe }}/_nicegui/static/fonts.css" rel="stylesheet" type="text/css" />
     <link href="{{ prefix | safe }}/_nicegui/static/quasar.prod.css" rel="stylesheet" type="text/css" />
+    {% if tailwind %}
     <script src="{{ prefix | safe }}/_nicegui/static/tailwind.min.js"></script>
-    {{ head_html | safe }}
+    {% endif %} {{ head_html | safe }}
   </head>
   <body>
     <script src="{{ prefix | safe }}/_nicegui/static/vue.global.prod.js"></script>