File Uploads: Which syntax do you prefer?

[picklelo]

The state code (common for all examples)

import pynecone as pc

class State(pc.State):
    """The app state."""

    # The image to show.
    img: str

    async def handle_upload(self, files: list[pc.UploadFile]):
        """Handle the upload of a file.
        
        Args:
            file: The uploaded file - https://fastapi.tiangolo.com/tutorial/request-files/
        """
        # Just use the first file.
        file = files[0]
        upload_data = await file.read()
        outfile = f".web/public/{file.filename}"

        # Save the file.
        with open(outfile, "wb") as file_object:
            file_object.write(upload_data)

        # Update the img var.
        self.img = file.filename

The render code - options ranked in order of increasing magic, decreasing explicitness.

Here we have the multiple=True prop, which allows multiple file uploads. Then the handle_upload event handler will receive a list[pc.UploadFile]. If the prop is set to false, the argument will just be a single pc.UploadFile. (We can also make this always be a list if people prefer).

Option 1:

Specify a function pc.upload_files that takes in as arguments

• the event handler that handles the upload
• the name of the upload component to use

def index():
    """The main view."""
    return pc.vstack(
        # The component to select files to upload.
        pc.upload(name="upload1", multiple=True),
        # The button to upload the file to the server.
        pc.button(
            "Upload", 
            on_click=lambda: pc.upload_files(State.handle_upload, "upload1")
        ),
        pc.image(src=State.img),
    )

We can also directly upload the file without a button (this applies for all the options):

def index():
    """The main view."""
    return pc.vstack(
        # The component to select files to upload.
        pc.upload(
            name="upload1",
            multiple=True
            on_change=lambda: pc.upload_files(State.handle_upload, "upload1")
        ),
        pc.image(src=State.img),
    )

Option 2:

Call the event handler directly in the lambda, and pass in an argument.

def index():
    """The main view."""
    return pc.vstack(
        # Specify an upload name.
        pc.upload(name="upload1", multiple=True),
        # The button to upload the file to the server.
        pc.button(
            "Upload", 
            # Specify which files to upload.
            on_click=lambda: State.handle_upload(pc.upload_files("upload1"))
        ),
        pc.image(src=State.img),
    )

Option 3:

The same as Option 2, but we magically convert the string "upload1" into a pc.UploadFile object. This is shorter, but can be potentially confusing.

def index():
    """The main view."""
    return pc.vstack(
        # Specify an upload name.
        pc.upload(name="upload1"),
        # The button to upload the file to the server.
        pc.button("Upload", on_click=lambda: State.handle_upload("upload1")),
        pc.image(src=State.img),
    )

Option 4:

In this option, we don't specify a name when uploading - pc.upload_files() function will upload all the files as a dict.

class State(pc.State):
    """The app state."""

    # The image to show.
    img: str

    async def handle_upload(self, files: dict[str, list[pc.UploadFile]]):
        """Handle the upload of a file.
        
        Args:
            files: The dict of uploaded files
        """
        upload1_files = files["upload1"]
        ...

def index():
    """The main view."""
    return pc.vstack(
        # Don't specify a file name.
        pc.upload(name="upload1"),
        # The button to upload the file to the server.
        pc.button(
            "Upload", 
            # Uploads all files to the event handler as a dict from the upload name to the list of uploaded files.
            on_click=lambda: State.handle_upload(pc.upload_files())
        ),
        pc.image(src=State.img),
    )

[Alek99]

To edit your vote click hide results and you should be able to change vote.

[ramsy0dev]

i have a question, does the pc.upload_files() returns a list of pc.UploadFile ? because i keep getting a WSGI error when i try to call it.
This is the error message:

─────────────────────── App Running ────────────────────────
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1091 ms (757 modules)
wait  - compiling...
event - compiled client and server successfully in 159 ms (757 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 353 ms (901 modules)
ERROR:    Exception in ASGI application
Traceback (most recent call last):
  File "/home/ramsy/.local/lib/python3.10/site-packages/uvicorn/protocols/http/httptools_impl.py", line 419, in run_asgi
    result = await app(  # type: ignore[func-returns-value]
  File "/home/ramsy/.local/lib/python3.10/site-packages/uvicorn/middleware/proxy_headers.py", line 78, in __call__
    return await self.app(scope, receive, send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/fastapi/applications.py", line 270, in __call__
    await super().__call__(scope, receive, send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/applications.py", line 124, in __call__
    await self.middleware_stack(scope, receive, send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 184, in __call__
    raise exc
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/middleware/errors.py", line 162, in __call__
    await self.app(scope, receive, _send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/middleware/cors.py", line 92, in __call__
    await self.simple_response(scope, receive, send, request_headers=headers)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/middleware/cors.py", line 147, in simple_response
    await self.app(scope, receive, send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/middleware/exceptions.py", line 79, in __call__
    raise exc
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/middleware/exceptions.py", line 68, in __call__
    await self.app(scope, receive, sender)
  File "/home/ramsy/.local/lib/python3.10/site-packages/fastapi/middleware/asyncexitstack.py", line 21, in __call__
    raise e
  File "/home/ramsy/.local/lib/python3.10/site-packages/fastapi/middleware/asyncexitstack.py", line 18, in __call__
    await self.app(scope, receive, send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/routing.py", line 706, in __call__
    await route.handle(scope, receive, send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/routing.py", line 276, in handle
    await self.app(scope, receive, send)
  File "/home/ramsy/.local/lib/python3.10/site-packages/starlette/routing.py", line 66, in app
    response = await func(request)
  File "/home/ramsy/.local/lib/python3.10/site-packages/fastapi/routing.py", line 235, in app
    raw_response = await run_endpoint_function(
  File "/home/ramsy/.local/lib/python3.10/site-packages/fastapi/routing.py", line 161, in run_endpoint_function
    return await dependant.call(**values)
  File "/home/ramsy/.local/lib/python3.10/site-packages/pynecone/app.py", line 499, in upload_file
    or types._issubclass(v, UploadFile)
  File "/home/ramsy/.local/lib/python3.10/site-packages/pynecone/utils/types.py", line 113, in _issubclass
    return cls_check_base == Any or issubclass(cls_base, cls_check_base)
TypeError: issubclass() arg 1 must be a class

i did try to do files[0] but it doesn't seem to work because the error get raised when i call pc.upload_files()

Edit: I did make an issue #794 on this
Edit: I solved it, the answer it as the issue #794