Blazor JsInterop Invoke après la résolution de chaque promesse

Question

J'essaie de faire fonctionner les choses correctement dans une application Blazor côté serveur. J'ai un composant Uploader mais il n'invoque pas d'Async après la résolution de chaque promesse du côté client. Il attend que toutes les images soient chargées puis invoque la méthode C#. Comment faire pour qu'il invoque la méthode C# après le chargement de chaque image ?

Je sais que JavaScript est mono-threading mais j'ai aussi essayé avec des web workers et cela fait toujours la même chose.

Un exemple de dépôt peut être trouvé ici https://dev.azure.com/twinnaz/BlazorUploader

Gif de ce qui se passe.

https://imgur.com/a/aF4AQUf

Il devrait être capable d'invoquer la méthode C# Async en parallèle à partir du fichier javascript si mon raisonnement est correct.

Answer 1

Ce problème est lié à Blazor et JS. Sur JS, vous n'attendez pas GenerateImageData .

Vous devez utiliser un for … of à la place, dans laquelle await fonctionnera comme prévu :

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");
    };
};

Sur Blazor, je vous propose de réécrire GenerateImageData comme :

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

Résultat :

• Des informations plus détaillées sur le problème JS : Utilisation d'async/await avec une boucle forEach
• Plus d'informations sur le problème de Blazor : Blazor - Affichage d'une attente ou d'un tourniquet lors d'un appel API

Answer 2

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);
};