Uploaded file.filename on safari and firefox has a leading slash

[masenf]

Describe the bug
The upload example code from the docs doesn't work on safari 😔

To Reproduce

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

import reflex as rx

from rxconfig import config


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

    # The images to show.
    img: list[str]

    @rx.event
    async def handle_upload(
        self, files: list[rx.UploadFile]
    ):
        """Handle the upload of file(s).

        Args:
            files: The uploaded files.
        """
        for file in files:
            upload_data = await file.read()
            outfile = rx.get_upload_dir() / file.filename

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

            # Update the img var.
            self.img.append(file.filename)


color = "rgb(107,99,246)"


def index():
    """The main view."""
    return rx.vstack(
        rx.upload(
            rx.vstack(
                rx.button(
                    "Select File",
                    color=color,
                    bg="white",
                    border=f"1px solid {color}",
                ),
                rx.text(
                    "Drag and drop files here or click to select files"
                ),
            ),
            id="upload1",
            border=f"1px dotted {color}",
            padding="5em",
        ),
        rx.hstack(
            rx.foreach(
                rx.selected_files("upload1"), rx.text
            )
        ),
        rx.button(
            "Upload",
            on_click=State.handle_upload(
                rx.upload_files(upload_id="upload1")
            ),
        ),
        rx.button(
            "Clear",
            on_click=rx.clear_selected_files("upload1"),
        ),
        rx.foreach(
            State.img,
            lambda img: rx.image(
                src=rx.get_upload_url(img)
            ),
        ),
        padding="5em",
    )


app = rx.App()
app.add_page(index)

Expected behavior
Dragging a file to upload should work the same on Chrome and Safari (and Firefox).

What actually happens

• Chrome gets the filename as ./image.png
• Safari and Firefox get the filename as /image.png

The sample code from the website uses rx.get_upload_dir() / file.filename (arguably bad practice), but because safari and firefox pass an "absolute" path, the left part gets killed so we try to open /image.png, which hopefully the reflex app does not have permission to do 😅.

Specifics (please complete the following information):

• Python Version: 3.12
• Reflex Version: 0.6.8.dev1

[linear]

ENG-4243 Uploaded file.filename on safari and firefox has a leading slash