Bugfix: 719-File-upload-props-not-working (#738)

pynecone/components/forms/upload.py

@@ -56,16 +56,25 @@ class Upload(Component):
         Returns:
             The upload component.
         """
+        # get only upload component props
+        supported_props = cls.get_props()
+        upload_props = {
+            key: value for key, value in props.items() if key in supported_props
+        }
         # The file input to use.
         upload = Input.create(type_="file")
         upload.special_props = {BaseVar(name="{...getInputProps()}", type_=None)}
 
         # The dropzone to use.
-        zone = Box.create(upload, *children, **props)
+        zone = Box.create(
+            upload,
+            *children,
+            **{k: v for k, v in props.items() if k not in supported_props}
+        )
         zone.special_props = {BaseVar(name="{...getRootProps()}", type_=None)}
 
         # Create the component.
-        return super().create(zone, on_drop=upload_file)
+        return super().create(zone, on_drop=upload_file, **upload_props)
 
     @classmethod
     def get_controlled_triggers(cls) -> Dict[str, Var]:

tests/components/forms/test_uploads.py

@@ -0,0 +1,79 @@
+import os
+
+import pytest
+
+import pynecone as pc
+
+
+@pytest.fixture
+def upload_component():
+    """A test upload component function.
+
+    Returns:
+        A test upload component function.
+    """
+
+    def upload_component():
+        return pc.upload(
+            pc.button("select file"),
+            pc.text("Drag and drop files here or click to select files"),
+            border="1px dotted black",
+        )
+
+    return upload_component()
+
+
+@pytest.fixture
+def upload_component_with_props():
+    """A test upload component with props function.
+
+    Returns:
+        A test upload component with props function.
+    """
+
+    def upload_component_with_props():
+        return pc.upload(
+            pc.button("select file"),
+            pc.text("Drag and drop files here or click to select files"),
+            border="1px dotted black",
+            no_drag=True,
+            max_files=2,
+        )
+
+    return upload_component_with_props()
+
+
+def test_upload_component_render(upload_component):
+    """Test that the render function is set correctly.
+
+    Args:
+        upload_component: component fixture
+    """
+    assert (
+        str(upload_component) == f"<ReactDropzone multiple={{true}}{os.linesep}"
+        "onDrop={e => File(e)}>{({getRootProps, getInputProps}) => (<Box "
+        'sx={{"border": "1px dotted black"}}{...getRootProps()}><Input '
+        f'type="file"{{...getInputProps()}}/>{os.linesep}'
+        f"<Button>{{`select file`}}</Button>{os.linesep}"
+        "<Text>{`Drag and drop files here or click to select "
+        "files`}</Text></Box>)}</ReactDropzone>"
+    )
+
+
+def test_upload_component_with_props_render(upload_component_with_props):
+    """Test that the render function is set correctly.
+
+    Args:
+        upload_component_with_props: component fixture
+    """
+    assert (
+        str(upload_component_with_props) == f"<ReactDropzone maxFiles={{2}}{os.linesep}"
+        f"multiple={{true}}{os.linesep}"
+        f"noDrag={{true}}{os.linesep}"
+        "onDrop={e => File(e)}>{({getRootProps, getInputProps}) => (<Box "
+        'sx={{"border": "1px dotted black"}}{...getRootProps()}><Input '
+        f'type="file"{{...getInputProps()}}/>{os.linesep}'
+        f"<Button>{{`select file`}}</Button>{os.linesep}"
+        "<Text>{`Drag and drop files here or click to select "
+        "files`}</Text></Box>)}</ReactDropzone>"
+    )