Fire OnClick?

[Ilan]

     Is there a way to fire the OnClick event ?

[Marin Bratanov]

Hello Ilan,

This was posted in the Upload component forum, but it does not have an OnClick event (you can see its list of events in the documentation). Could you confirm what component you are using and what you are trying to achieve?

Regards,
Marin Bratanov
Progress Telerik

[Ilan]

I'm using the Upload component, I would like to open the choose file window automatically

 

[Marin Bratanov]

Hi Ilan,

You can Follow the implementation of such a feature here: https://feedback.telerik.com/blazor/1475231-trigger-file-select-dialog-from-my-own-button. The thread also offers a solution you can use right now.

 

Regards,
Marin Bratanov
Progress Telerik

[Ilan]

How can I call this from within a c# method?

 

That didn't work for me:

public async Task OnLogoClick()
{
var script = "$('.k-upload input').click()";
await JS.InvokeVoidAsync(script);
}

[Marin Bratanov]

Hello Ilan,

You can use the JavScript Interop that the framework provides: https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0

Regards,
Marin Bratanov
Progress Telerik

[Ilan]

 

I've tried that but got 

Microsoft.JSInterop.JSException: '$ is not defined

_Host.cshtml

window.customUploadClick = function () {
$('.k-upload-button input').trigger('click');
return "done";
}

Interop

public async Task<string> Upload()
{
return await _js.InvokeAsync<string>("customUploadClick");
}

 

What am I missing?

[Ilan]

jquery was missing, my bad

[Marin Bratanov]

If you don't use jQuery already you don't have to add it, I've updated the other example with plain dom methods:

@inject IJSRuntime _js

<script suppress-error="BL9992">
    window.customUploadClick = function () {
        document.querySelector(".k-upload-button input").click();
    }
</script>

<TelerikButton OnClick="@InvokeSelectClick">invoke click</TelerikButton>

<TelerikUpload></TelerikUpload>

@code{
    async Task InvokeSelectClick()
    {
        await _js.InvokeVoidAsync("customUploadClick");
    }
}

 

--Marin