How to call a javascript function?

Question

I try to call a js function from a razor-file. The script is available in index.html. The number of selected files will be shown. But I expect under the html-text: "Selected files:" the names of the Excel-files. But after selecting nothing is shown.

What do I wrong? And do I solve it?

The blazor-page [importexceldata.razor]

@page "/importexceldata"
@inject IJSRuntime js

<h3>Import Excel Data</h3>
<form>
    <div><input id="minimum" type="text" /></div>
    <div><input id="maximum" type="text" /></div>
    <div></div>
    <div></div>
    <p><span>Select file(s) to upload :</span></p>
    <p>
        <input class="btn btn-danger"
               id="file" multiple
               name="file"
               type="file"
               onchange="javascript:updateList()" />
    </p>
    <p>
        <input class="btn btn-warning"
               id="button1"
               type="button"
               value="Upload" />
    </p>
    <p>Selected files:</p>
    <div id="fileList"></div>
</form>

@code {
    public object UpdateList() => js.InvokeAsync<object>("updateList");
    //protected override async Task OnAfterRenderAsync(bool firstRender)
    //{
    //}
}

... and the index.html

    <script type="text/javascript">
        window.document.readyState(function(){
            $("#button1").click(function (evt) {
                var files = $("#file").get(0).files;
                var minimum = $("#minimum").val();
                var maximum = $("#maximum").val();

                if (files.length > 0) {
                    console.log(files.length);

                    var data = new FormData();
                    for (i = 0; i < files.length; i++) {
                        data.append("file" + i, files[i]);
                    }

                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "/Home/UploadFiles?minimum=" + minimum + "&maximum=" + maximum,
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function (messages) {
                            for (i = 0; i < messages.length; i++) {
                                alert(messages[i]);
                            }
                        },
                        error: function () {
                            alert("Error while invoking the Web API");
                        }
                    });
                }
            });

            //window.jsMethod = (updateList) => {
         updateList = function () {
            var input = document.getElementById('file');
            var output = document.getElementById('fileList');
            var children = "";
            for (var i = 0; i < input.files.length; ++i) {
                children += '<li>' + input.files.item(i).name + '</li>';
            }
            output.innerHTML = '<ul>' + children + '</ul>';
        };
    </script>
</body>

</html>

Answer 1

Check your function code, There is no return value, So you can't call js like this:

@code {
   public object UpdateList() => js.InvokeAsync<object>("updateList");
}

Change your function code like this:

       function updateList () {
            var input = document.getElementById('file');
            var output = document.getElementById('fileList');
            var children = "";
            for (var i = 0; i < input.files.length; ++i) {
                children += '<li>' + input.files.item(i).name + '</li>';
            }
            output.innerHTML = '<ul>' + children + '</ul>';
        }; 

Change input code use @onchange=xx :

<input class="btn btn-danger"
               id="file" multiple
               name="file"
               type="file"
               @onchange="UpdateList" />

Then call js like this:

@code {
    public async Task UpdateList() {
        await Js.InvokeVoidAsync("updateList");
    }
}

Demo

==================Edit===============

@page "/importexceldata"
@inject IJSRuntime Js

<PageTitle>Index</PageTitle>
<form>
    <div><input id="minimum" type="text" /></div>
    <div><input id="maximum" type="text" /></div>
    <div></div>
    <div></div>
    <p><span>Select file(s) to upload :</span></p>
    <p>
        <input class="btn btn-danger"
               id="file" multiple
               name="file"
               type="file"
               @onchange="UpdateList" />
    </p>
    <p>
        <input class="btn btn-warning"
               id="button1"
               type="button"
               value="Upload" />
    </p>
    <p>Selected files:</p>
    <div id="fileList"></div>
</form>

@code {
    public async Task UpdateList() {
        await Js.InvokeVoidAsync("updateList");
    }
}

Index

<script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(function (evt) {
                var files = $("#file").get(0).files;
                var minimum = $("#minimum").val();
                var maximum = $("#maximum").val();

                if (files.length > 0) {
                    console.log(files.length);

                    var data = new FormData();
                    for (i = 0; i < files.length; i++) {
                        data.append("file" + i, files[i]);
                    }

                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "/Home/UploadFiles?minimum=" + minimum + "&maximum=" + maximum,
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function (messages) {
                            for (i = 0; i < messages.length; i++) {
                                alert(messages[i]);
                            }
                        },
                        error: function () {
                            alert("Error while invoking the Web API");
                        }
                    });
                }
            });
        });

            //window.jsMethod = (updateList) => {
         function updateList () {
            var input = document.getElementById('file');
            var output = document.getElementById('fileList');
            var children = "";
            for (var i = 0; i < input.files.length; ++i) {
                children += '<li>' + input.files.item(i).name + '</li>';
            }
            output.innerHTML = '<ul>' + children + '</ul>';
        }; 
    </script>