Address code review

mesop/components/uploader/e2e/__init__.py

@@ -1 +1,2 @@
+from . import content_uploader_app as content_uploader_app
 from . import uploader_app as uploader_app

mesop/components/uploader/e2e/content_uploader_app.py

@@ -0,0 +1,47 @@
+import base64
+
+import mesop as me
+
+
+@me.stateclass
+class State:
+  file: me.UploadedFile
+  upload_count: int = 0
+
+
+@me.page(path="/components/uploader/e2e/content_uploader_app")
+def app():
+  state = me.state(State)
+  with me.box(style=me.Style(padding=me.Padding.all(15))):
+    with me.content_uploader(
+      accepted_file_types=["image/jpeg", "image/png"],
+      on_upload=handle_upload,
+      type="flat",
+      color="primary",
+      style=me.Style(font_weight="bold"),
+    ):
+      with me.box(style=me.Style(display="flex", gap=5)):
+        me.icon("upload")
+        me.text("Upload Image", style=me.Style(line_height="25px"))
+
+    if state.file.size:
+      with me.box(style=me.Style(margin=me.Margin.all(10))):
+        me.text(f"File name: {state.file.name}")
+        me.text(f"File size: {state.file.size}")
+        me.text(f"File type: {state.file.mime_type}")
+        me.text(f"Upload count: {state.upload_count}")
+
+      with me.box(style=me.Style(margin=me.Margin.all(10))):
+        me.image(src=_convert_contents_data_url(state.file))
+
+
+def handle_upload(event: me.UploadEvent):
+  state = me.state(State)
+  state.file = event.file
+  state.upload_count += 1
+
+
+def _convert_contents_data_url(file: me.UploadedFile) -> str:
+  return (
+    f"data:{file.mime_type};base64,{base64.b64encode(file.getvalue()).decode()}"
+  )

mesop/components/uploader/e2e/uploader_app.py

@@ -13,16 +13,14 @@ class State:
 def app():
   state = me.state(State)
   with me.box(style=me.Style(padding=me.Padding.all(15))):
-    with me.content_uploader(
+    me.uploader(
+      label="Upload Image",
       accepted_file_types=["image/jpeg", "image/png"],
       on_upload=handle_upload,
       type="flat",
       color="primary",
       style=me.Style(font_weight="bold"),
-    ):
-      with me.box(style=me.Style(display="flex", gap=5)):
-        me.icon("upload")
-        me.text("Upload Image", style=me.Style(line_height="25px"))
+    )
 
     if state.file.size:
       with me.box(style=me.Style(margin=me.Margin.all(10))):

mesop/components/uploader/e2e/uploader_test.ts

@@ -20,9 +20,7 @@ test('test upload file', async ({page}) => {
   ).toHaveCount(1);
 
   // Check that we can re-upload the same file.
-  // Also check that the icon in the button is being rendered in the composite
-  // uploader component.
-  await page.locator('//*[@role="img" and text()=" upload"]').click();
+  await page.getByText('Upload Image').click();
   const fileChooser2 = await fileChooserPromise;
   await fileChooser2.setFiles(path.join(__dirname, 'mesop_robot.jpeg'));
   await expect(page.getByText('File name: mesop_robot.jpeg')).toHaveCount(1);

mesop/components/uploader/uploader.py

@@ -53,7 +53,7 @@ def uploader(
   accepted_file_types: Sequence[str] | None = None,
   key: str | None = None,
   on_upload: Callable[[UploadEvent], Any] | None = None,
-  type: Literal["raised", "flat", "stroked", "icon"] | None = None,
+  type: Literal["raised", "flat", "stroked"] | None = None,
   color: Literal["primary", "accent", "warn"] | None = None,
   disable_ripple: bool = False,
   disabled: bool = False,