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`})}" + )