[Question] Page.overlay in UserControl

[ingdesarr1]

Question

Good afternoon. Actually, I try to use the element FilePicker to upload a element in my page. To use this element, in the doc, we need to append in the page.overlay the FilePicker. I build a UserControl with a button, and when the button is pressed, the FilePicker should be open, but it's not. The first problem is in the UserControl, if I use self.page.overlay.append, appears the first error. When I quit this line, show me the second error. How can I append the FilePicker and continue using the UserControl? Thanks

Code sample

class ButtCargar(ft.UserControl):

    def __init__(self):
        super().__init__()
        self.texto = ft.Text("Sin archivo seleccionado")
        self.files = ft.FilePicker(on_result=self.archivos)
        # self.page.overlay.extend(self.files)

    def archivos(self,e:ft.FilePickerResultEvent):
        self.texto.value = (
            ", ".join(map(lambda f: f.name, e.files)) if e.files else "Cancelled!"
        )
        self.texto.update()


    def build(self):

        return ft.Row(
                controls=[
                    ft.IconButton(
                    icon=ft.icons.FILE_UPLOAD,
                    icon_color="green",
                    height=60,
                    bgcolor=ft.colors.GREY_200,
                    on_click= lambda _:self.files.pick_files(allow_multiple=False)
                ),
                    self.texto,
                ],
                expand=True
            )

Error message

File "C:\Informacion\ConcretX\data_clients\form.py", line 57, in client_form_button
    ButtCargar(),
    ^^^^^^^^^^^^
  File "C:\Informacion\ConcretX\data_clients\form.py", line 129, in __init__
    self.page.overlay.extend(self.files)
    ^^^^^^^^^^^^^^^^^
AttributeError: 'NoneType' object has no attribute 'overlay'


****Second error

Exception in thread Thread-67 (<lambda>):
Traceback (most recent call last):
  File "C:\Users\Usuario\AppData\Local\Programs\Python\Python311\Lib\threading.py", line 1038, in _bootstrap_inner
    self.run()
  File "C:\Users\Usuario\AppData\Local\Programs\Python\Python311\Lib\threading.py", line 975, in run
    self._target(*self._args, **self._kwargs)
  File "C:\Informacion\ConcretX\data_clients\form.py", line 151, in <lambda>
    on_click= lambda _:self.files.pick_files(allow_multiple=False)
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Informacion\ConcretX\concretx\Lib\site-packages\flet_core\file_picker.py", line 168, in pick_files
    self.update()
  File "C:\Informacion\ConcretX\concretx\Lib\site-packages\flet_core\control.py", line 260, in update
    assert self.__page, "Control must be added to the page first."
AssertionError: Control must be added to the page first.

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

Add the below method to your UserControl and it will work:

    def did_mount(self):
        self.page.overlay.append(self.files)
        self.page.update()

The did_mount is explained here.

[ingdesarr1]

Thank you very much. I hadn't seen that option