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> 
