Use a Hidden Fileloader via a Link

Anvil Q&A
2

Sure it’s possible

If you put that in an Custom Html Form
you can turn it into a custom component

and with a little js-interop you can make it behave in a similar way to anvil’s FileUploder

Sample code:

import anvil.js

class FileInput(FileInputTemplate):
    def __init__(self, **properties):
        self.init_components(**properties)
        self.dom = anvil.js.get_dom_node(self)
        self.input = self.dom.querySelector("input")
        self.input.onchange = self.input_change

    def input_change(self, js_event):
        # make sure you've made this a custom component
        # and configured a change event
        self.raise_event("change", file=self.file)

    @property
    def file(self):
        files = self.input.files
        if not files:
            return None
        file = files[0]
        media = anvil.js.to_media(file)
        return media

Clone:

2 Likes