Skip to main content
The 2024 Developer Survey results are live! See the results
deleted 6 characters in body
Source Link
Bercovici Adrian
  • 9.2k
  • 18
  • 81
  • 171

I am trying to read some file using the JSInterop provided by Blazor.The problem is that even if in .C# i await the method , it seems it does not await it.Thus i can not retrieve the result provided by js.

C#

<input name="start" type="file" onchange="@(async(x)=>await OnChangeS(x))" />

@functions{
    private const string S = "start";

    public async Task OnChangeS(UIChangeEventArgs ev) {
        var str =  await JSRuntime.Current.InvokeAsync<string>("methods.readFile", S);
        Console.WriteLine("From blazor data is:" + (string.IsNullOrEmpty(str) ? "empty" : str));
    }
}

JS

  window.methods = {

    readFile: async function (fileName) {

        let reader = new FileReader();
        var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
        var data = null;
        reader.onload = () => {
                data = reader.result;
                console.log("from load data is"+data);
           
        };
        reader.onloadend = () => {  console.log("from loadend data is"+data);return data };
        reader.readAsText(file);
    }
}

OUTPUT:
Given a sample json file : { "name":"adita","age":33} this is my output order:

WASM: Blazor S:empty

Fread.js:11 from load data is: {
    "name":"adita",
    "age":33
}
Fread.js:14 from loadend data is: {
    "name":"adita",
    "age":33
}

So my question is why is the method not awaited by Blazor ?

I am trying to read some file using the JSInterop provided by Blazor.The problem is that even if in .C# i await the method , it seems it does not await it.Thus i can not retrieve the result provided by js.

C#

<input name="start" type="file" onchange="@(async(x)=>await OnChangeS(x))" />

@functions{
    private const string S = "start";

    public async Task OnChangeS(UIChangeEventArgs ev) {
        var str =  await JSRuntime.Current.InvokeAsync<string>("methods.readFile", S);
        Console.WriteLine("From blazor data is:" + (string.IsNullOrEmpty(str) ? "empty" : str));
    }
}

JS

  window.methods = {

    readFile: async function (fileName) {

        let reader = new FileReader();
        var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
        var data = null;
        reader.onload = () => {
                data = reader.result;
                console.log("from load data is"+data);
           
        };
        reader.onloadend = () => {  console.log("from loadend data is"+data);return data };
        reader.readAsText(file);
    }
}

OUTPUT:
Given a sample json file : { "name":"adita","age":33} this is my output order:

WASM: Blazor S:empty

Fread.js:11 from load data is: {
    "name":"adita",
    "age":33
}
Fread.js:14 from loadend data is: {
    "name":"adita",
    "age":33
}

So my question is why is the method not awaited by Blazor ?

I am trying to read some file using the JSInterop provided by Blazor.The problem is that even if in .C# i await the method , it seems it does not await it.Thus i can not retrieve the result provided by js.

C#

<input name="start" type="file" onchange="@(async(x)=>await OnChangeS(x))" />

@functions{
    private const string S = "start";

    public async Task OnChangeS(UIChangeEventArgs ev) {
        var str =  await JSRuntime.Current.InvokeAsync<string>("methods.readFile", S);
        Console.WriteLine("From blazor data is:" + (string.IsNullOrEmpty(str) ? "empty" : str));
    }
}

JS

  window.methods = {

    readFile: function (fileName) {

        let reader = new FileReader();
        var file = document.querySelector('input[type=file ][name=' + fileName + ']').files[0];
        var data = null;
        reader.onload = () => {
                data = reader.result;
                console.log("from load data is"+data);
           
        };
        reader.onloadend = () => {  console.log("from loadend data is"+data);return data };
        reader.readAsText(file);
    }
}

OUTPUT:
Given a sample json file : { "name":"adita","age":33} this is my output order:

WASM: Blazor S:empty

Fread.js:11 from load data is: {
    "name":"adita",
    "age":33
}
Fread.js:14 from loadend data is: {
    "name":"adita",
    "age":33
}

So my question is why is the method not awaited by Blazor ?

edited title
Link
Bercovici Adrian
  • 9.2k
  • 18
  • 81
  • 171

Can not await How to invoke JS async method infrom Blazor

edited title
Link
Bercovici Adrian
  • 9.2k
  • 18
  • 81
  • 171

Awaiting JSInterop Can not await JS method within Blazor

Source Link
Bercovici Adrian
  • 9.2k
  • 18
  • 81
  • 171
Loading