I want to enable a button after file upload process finished.

[muratbedir]

Question

I have below code and I want to when file upload completed

 ui.button('Next', on_click=stepper.next)

button chage state to enabled. I try but I can not find correct solution. Help appreciated.

   with ui.stepper().props('vertical').classes('w-full') as stepper:
        with ui.step('Alıcı Seçimi & Not girişi'):
            ui.label('Alıcı seçimini ve not girişini yapınız')
            slt_alici= ui.select(label='Dosya Alıcısı',options=to_rechiver, with_input=True, on_change= update_button).classes('w-40') 

            inpt_dosya=ui.input(label='Hasar Dosya No', placeholder='start typing',
                    on_change=update_button,
                    validation={'Çok uzun': lambda value: len(value) < 20})
            
            inpt_aciklama=ui.input(label='Opsiyonel açıklama giriniz', placeholder='start typing',
                    on_change=update_button,
                    validation={'Çok uzun': lambda value: len(value) < 200})
            result = ui.label()

            with ui.stepper_navigation():
                ui.button('Next', on_click=stepper.next)
        with ui.step('Dosya ekle'):
            ui.label('Birden fazla dosyayı seçerek ekleyebilirsiniz.')
            upt_yukle = ui.upload(label='Yüklenecek Dosya(ları) seçiniz', on_upload=handle_upload,auto_upload=True, multiple=True, max_total_size=50_000_000,on_rejected=lambda: ui.notify('Dosya kabul edilmedi boyutu yüksek'),max_files=10).props('accept=".pdf,.docx,.jpg,.jpeg"').classes("max-w-full")
            with ui.stepper_navigation():
                next1=ui.button('Next', on_click=stepper.next)
                ui.button('Back', on_click=stepper.previous).props('flat')
        with ui.step('Dosyayı gönder'):
            ui.label('Dosyaları gönderin')
            with ui.stepper_navigation():
                button = ui.button('İşlemi Tamamla', on_click=IslemiTamamla)
                #ui.button('Back', on_click=stepper.previous).props('flat')

ui.run(port=8089,storage_secret='sdfs34tsdfsrgferger')

[falkoschindler]

Hi @muratbedir,

What does your handle_upload look like? It could simply call next1.enable(). Minimal example:

b = ui.button('Next')
b.disable()

def handle_upload():
    b.enable()

ui.upload(on_upload=handle_upload)

[muratbedir]

Thanks for fast response, I switched ui.stepper() to flat design. this is works for me, but I can not successfully make working code with iu.stepper()

Is there any book related to Nicegui or can someone make sample code for validation, event hanging and binding this will be helpful for newcomers.

by the way thanks for great framework.

@ui.page('/')
async def index():
    cache = app.storage.client
    cache['count'] = False
    dosyalar = []
# Define a function that will be called when a file is uploaded

    def IslemiTamamla () :
        print (dosyalar)

        mailadresi = mailler[slt_alici.value]
        send_mail("[email protected]",[mailadresi],f"{inpt_dosya.value} nolu dosyanın belgeleri",f"{inpt_aciklama.value}",dosyalar)
        dialog.open()

    def handle_upload(e: events.UploadEventArguments):
        # Save the uploaded file to a specific location
        with open(f'uploads/{e.name}', 'wb') as f:
            dosyalar.append(f'uploads/{e.name}')
            f.write(e.content.read())
        # Provide feedback to the user that the file was successfully uploaded
        
        cache['count'] = True
        update_button()
        ui.notify(f' {e.name} isimli dosya yüklemesi başarılı / uploaded successfully!')

    to_rechiver = [
        'MURAT B'
    ]

    mailler = {
        "MURAT B" : "[email protected]"

    }

    def update_button():
        button1.enabled = slt_alici.value and inpt_dosya.value  #and cache['count']

    with ui.dialog() as dialog, ui.card():
        ui.label('İşlem bitmiştir.')
        ui.button('Çıkış', on_click=lambda: ui.navigate.to('/'))


    ui.label('Belge gönderim platformu').tailwind('drop-shadow', 'font-bold', 'text-green-600')
    
    ui.label('Alıcı seçimini ve not girişini yapınız')
    slt_alici= ui.select(label='Dosya Alıcısı',options=to_rechiver, with_input=True, on_change= update_button).classes('w-40') 
    inpt_dosya=ui.input(label='Hasar Dosya No', placeholder='start typing', on_change=update_button,  validation={'Çok uzun': lambda value: len(value) < 20})
    inpt_aciklama=ui.input(label='Opsiyonel açıklama giriniz', placeholder='start typing',  on_change=update_button,  validation={'Çok uzun': lambda value: len(value) < 200})
    result = ui.label()

    ui.label('Birden fazla dosyayı seçerek ekleyebilirsiniz.')
    upt_yukle = ui.upload(label='Yüklenecek Dosya(ları) seçiniz', on_upload=handle_upload,auto_upload=True, multiple=True, max_total_size=50_000_000,on_rejected=lambda: ui.notify('Dosya kabul edilmedi boyutu yüksek'),max_files=10).props('accept=".pdf,.docx,.jpg,.jpeg"').classes("max-w-full")
    button1= ui.button('İşlemi Tamamla', on_click=IslemiTamamla)
    button1.disable()

#ui.run(port=8089,storage_secret='sdfs34tsdfsrgferger')

[falkoschindler]

I switched ui.stepper() to flat design. this is works for me, but I can not successfully make working code with iu.stepper()

Is it working or not? If not, what exactly did you expect to happen, what happens instead?

If you still need assistance with your code, please try to simplify it as much as possible. This allows us and the community to help more efficiently. Thanks!
Why is it important to provide a minimal reproducible example?

[muratbedir]

I face another proplems and drop out stepper, your suggestions worked. I handle verifications with below update_button function that I need std_alici and inpt_dosya sould be filled.

I want to handle iu.upload file attached event (in case I make sure there ise a file othervise I will not enable button1 -işlemi tamamla but I can not handle iu.upload file attached evenet) but I fail I can not find corrent way to handle this.

Thanks for help.

def update_button():
    button1.enabled = slt_alici.value and inpt_dosya.value  #and cache['count']

with ui.dialog() as dialog, ui.card():
    ui.label('İşlem bitmiştir.')
    ui.button('Çıkış', on_click=lambda: ui.navigate.to('/'))

ui.label('Belge gönderim platformu').tailwind('drop-shadow', 'font-bold', 'text-green-600')

ui.label('Alıcı seçimini ve not girişini yapınız')
slt_alici= ui.select(label='Dosya Alıcısı',options=to_rechiver, with_input=True, on_change= update_button).classes('w-40') 
inpt_dosya=ui.input(label='Hasar Dosya No', placeholder='start typing', on_change=update_button,  validation={'Çok uzun': lambda value: len(value) < 20})
inpt_aciklama=ui.input(label='Opsiyonel açıklama giriniz', placeholder='start typing',  on_change=update_button,  validation={'Çok uzun': lambda value: len(value) < 200})
result = ui.label()

ui.label('Birden fazla dosyayı seçerek ekleyebilirsiniz.')
upt_yukle = ui.upload(label='Yüklenecek Dosya(ları) seçiniz', on_upload=handle_upload,auto_upload=True, multiple=True, max_total_size=50_000_000,on_rejected=lambda: ui.notify('Dosya kabul edilmedi boyutu yüksek'),max_files=10).props('accept=".pdf,.docx,.jpg,.jpeg"').classes("max-w-full")
button1= ui.button('İşlemi Tamamla', on_click=IslemiTamamla)
button1.disable()