Blazor doesn't re-render on class change

<div>  <div>      <div class="@(Base64Images.Count == 0 ? "block" : "hidden")">          <label for="file-upload">              <span>Upload a file</span>                <InputFile OnChange="HandleChange" id="file-upload" name="file-upload" class="sr-only" />          </label>      </div>      <div class="@(Base64Images.Count > 0 ? "block" : "hidden")">          @foreach(var image in Base64Images)          {              <img src="@image" />          }      </div>  </div>  </div>    @code {  public IReadOnlyList<IBrowserFile> BrowserFiles { get; protected set; } = new List<IBrowserFile>();    private List<string> Base64Images { get; set; } = new List<string>();    private async Task<bool> HandleChange(InputFileChangeEventArgs e)  {      IReadOnlyList<IBrowserFile> fileList;        BrowserFiles = new List<IBrowserFile> { e.File };        await BrowserFilesToBase64Images();        return true;  }    private async Task<bool> BrowserFilesToBase64Images()  {      foreach(var image in BrowserFiles)      {          if(image != null)          {              var format = "image/png";              var buffer = new byte[image.Size];              await image.OpenReadStream().ReadAsync(buffer);              Base64Images.Add($"data:{format};base64,{Convert.ToBase64String(buffer)}");          }      }        return true;  }  

}

So I have this code, it's pretty simple. I want to display a preview of what the use uploads, but the preview must only be displayed after the file was selected. Likewise, I want to hide the input (but not remove it from the DOM) when there is an image loaded. But no matter what I do, Blazor won't re-render.

Base64Images.Count  

Changes and I have been able to debug it. The conditions should be hit, but the HTML won't change. Is there any way to tell Blazor to re-render?

I know of StateHasChanged(), but not only that one is supposedly called in after every event, but even calling it multiple times doesn't force the re-render.

https://stackoverflow.com/questions/66979156/blazor-doesnt-re-render-on-class-change April 07, 2021 at 11:23AM