How to call a javascript function?

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 type="text" /></div> <div><input type="text" /></div> <div></div> <div></div> <p><span>Select file(s) to upload :</span></p> <p> <input multiple name="file" type="file" onchange="javascript:updateList()" /> </p> <p> <input type="button" value="Upload" /> </p> <p>Selected files:</p> <div></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>

1 Answer

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 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 type="text" /></div> <div><input type="text" /></div> <div></div> <div></div> <p><span>Select file(s) to upload :</span></p> <p> <input multiple name="file" type="file" @onchange="UpdateList" /> </p> <p> <input type="button" value="Upload" /> </p> <p>Selected files:</p> <div></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>