diff --git a/pynecone/components/forms/upload.py b/pynecone/components/forms/upload.py
index 81e69f937..d633ca021 100644
--- a/pynecone/components/forms/upload.py
+++ b/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]:
diff --git a/tests/components/forms/__init__.py b/tests/components/forms/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/components/forms/test_uploads.py b/tests/components/forms/test_uploads.py
new file mode 100644
index 000000000..025af06c4
--- /dev/null
+++ b/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" File(e)}>{({getRootProps, getInputProps}) => ({os.linesep}'
+ f"{os.linesep}"
+ "{`Drag and drop files here or click to select "
+ "files`})}"
+ )
+
+
+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" File(e)}>{({getRootProps, getInputProps}) => ({os.linesep}'
+ f"{os.linesep}"
+ "{`Drag and drop files here or click to select "
+ "files`})}"
+ )