Is there a way to send data from my client side js widget to server side (for example images, videos)? about flexx

[Konubinix]

example.zip

Here is a working example.

The content of the uploaded file is printed on the server part.

I think that this should work for small text files.

But if you need to send big files or binary files, you would rather want to show some upload progression, and the action/reaction mecanism seems not to be well suited for that.

[almarklein]

There are two ways:

• Create an action on the PyComponent. You can then call the action from the JS side.
• Create a reaction on the PyComponents that listens to events on the JS side.

Also see https://flexx.readthedocs.io/en/stable/guide/patterns.html

[korayoezdemir]

class Upload(flx.PyComponent):
    CSS = "body {background-color: #F5F5DC;}"

    def init(self):
        self.input = Input()

    `@flx.action`
    def send(self, msg):
        print("send", msg)

class Input(flx.Widget):
    CSS = "body {background-color: #F5F5DC;}"

    def _create_dom(self):
        return flx.create_element("div")

    def _render_dom(self):
        return [
            flx.create_element(
                "input",
                {
                    "type": "file",
                    "onchange": lambda e: <callAnotherFunctionhere>(e.target.files[0]),
                },
            ),
        ]

these are my widgets, I want to upload a picture and then get the raw bytes of it and use it on my server side, how can i achieve this, when I call the send action with the onchange attribute, it does not work since it cant compile py to js, so far so good, you basically said what I have to do earlier, but I still cant figure out how to do this.

[Konubinix]

The initialization is a bit tricky as I use a class dedicated to emit events and I use a workaround to make sure things get loaded at the appropriate time with self.session.call_after_roundtrip(self.init_widgets)

There may be a simpler way to put things together, but at least, this example contains what you should need.

[Konubinix]

To upload big files, I would create a websocket handler in the tornado app, based on the implementation of flexx.app._tornadoserver.WSHandler and registered using flx.current_server().app.add_handlers("someurl", MYWSHandler) in the main before calling flx.start

That way, the client code could open the connection and send data while showing a nice upload progressbar.

I don't have time to write a simple example of this, so this is just an (hopefully useful) food for thoughts.