feat: Accept files dropped onto the canvas

[philippjfr]

Description

I extended canvas drops to files dragged in from the operating system. The drop event added in #77 only called getData(drop_type), and an OS file drag has the type "Files" with no string payload, so there was nothing to read.

With "Files" in drop_types, the canvas reads each dropped file as text and emits drop with data set to a list of {"name", "type", "size", "content"}. position and target are resolved before the files are read, because the browser clears the event once the handler yields. Errors while reading are reported through the existing client_error path. Other drop types behave as before. panel-flowdash uses this to recreate a dashboard from its downloaded JSON file.

import json

import panel as pn

from panel_reactflow import ReactFlow

pn.extension()

flow = ReactFlow(drop_types=["Files"], sizing_mode="stretch_both", min_height=500)


def on_file_drop(payload, flow):
    for file in payload["data"]:
        if file["name"].endswith(".json"):
            graph = json.loads(file["content"])
            flow.param.update(nodes=graph["nodes"], edges=graph["edges"])


flow.on("drop", on_file_drop)
flow.servable()

Save {"nodes": [{"id": "a", "position": {"x": 0, "y": 0}, "label": "A", "data": {}}], "edges": []} as graph.json and drag it onto the canvas to load node A.

I added UI tests for a drop of two files and for a file drop being ignored when "Files" is not in drop_types, documented the payload in the drop_types docstring, the on() event list and "React to Events", and added 0.5.1 release notes. The drop UI tests pass (7).

AI Disclosure

Tool & Model: Kilo Code + Claude Opus 5.5
Usage: Implemented the file drop support, tests and docs while adding dashboard import to panel-flowdash, and drafted this description; I reviewed the diff and ran the listed checks.

• I have tested all AI-generated content in my PR.
• I take responsibility for all AI-generated content in my PR.

Checklist

• Tests added and are passing
• Added documentation