Blazor JsInterop Invoke after each promise resolves

Question

Trying to get things working correctly in Blazor Server Side App. I have an Uploader Component but it doesn't InvokeAsync after each promise is resolved on client side. It waits for all Images to load then Invokes the C# method. How would I get it to Invoke the C# method after each image is loaded?

I know JavaScript is single threaded but also tried with web workers and still does the same thing.

Sample repo can be found here https://dev.azure.com/twinnaz/BlazorUploader

Gif of what's happening.

https://i.stack.imgur.com/7rj7Q.jpg

It should be able to invoke the C# method Async in parallel from javascript file if my thinking is correct.

dani herrera · Accepted Answer · 2019-08-18T10:38:32.287

This issue is related with Blazor and JS. On JS you are not awaiting for GenerateImageData.

You should to use a modern for … ofloop instead, in which await will work as expected:

GetFileInputFiles = async (instance, fileInput) => {
    var files = Array.from(fileInput.files);
    for (const image of files) {
        var imagedata = await readUploadedFileAsText(image);
        console.log("sending");
        _ = await instance.invokeMethodAsync('GenerateImageData', imagedata);
        console.log("sent");
    };
};

On Blazor, I suggest to you to rewrite GenerateImageData as :

    [JSInvokable]
    public async Task GenerateImageData(string data)
    {
        System.Console.WriteLine( "Receiving"  );
        ImageBase64.Add(data);
        await Task.Delay(1);
        StateHasChanged();
        System.Console.WriteLine( "Received"  );
    }

Result:

More detailed info about JS issue: Using async/await with a forEach loop
More detailed info about Blazor issue: Blazor - Display wait or spinner on API call

Thanks helped a lot !!! Ended up doing it a slightly different way but your knowledge lead to doing more searching and found a better solution to preview the images. I'll update repo with the new code tonight. — Wongton, Aug 19 '19 at 00:48

score 0 · Answer 2 · answered Aug 19 '19 at 00:49

GeneratePreviewImages = async (dotNet, fileInput) => {

    const files = Array.from(fileInput.files);

    const imageSrcs = files.map(file => getPreviewImageSrc(file));
    loop(imageSrcs, dotNet);
};



const loop = async (arr, dotNet) => {
    for await (const src of arr) {
        console.log(src);
        dotNet.invokeMethodAsync('GenerateImageData', src);
    }
};

const getPreviewImageSrc = async (file) => {
  return  URL.createObjectURL(file);
};

Blazor JsInterop Invoke after each promise resolves

2 Answers2