From 33a9c7b7039c0fa34766ff430e1a79c9b375432c Mon Sep 17 00:00:00 2001 From: KB Bot Date: Fri, 4 Apr 2025 12:17:53 +0000 Subject: [PATCH 1/6] Added new kb article fileselect-blazor-initial-files --- .../fileselect-blazor-initial-files.md | 124 ++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 knowledge-base/fileselect-blazor-initial-files.md diff --git a/knowledge-base/fileselect-blazor-initial-files.md b/knowledge-base/fileselect-blazor-initial-files.md new file mode 100644 index 0000000000..8bc2cb3bd7 --- /dev/null +++ b/knowledge-base/fileselect-blazor-initial-files.md @@ -0,0 +1,124 @@ +--- +title: Initial Files not Displaying in FileSelect +description: Learn how to show initial files in the FileSelect component for Blazor. +type: troubleshooting +page_title: How to Display Initial Files in Blazor FileSelect Component +slug: fileselect-kb-blazor-initial-files +tags: fileselect, blazor, initial, files +res_type: kb +ticketid: 1683091 +--- + +## Environment + + + + + + + + +
ProductFileSelect for Blazor
+ +## Description + +In an attempt to display initial files in the [`FileSelect`](slug:fileselect-overview) component, the files are fetched from an API call and assigned to the Files parameter of the component. Despite this, the component does not render the initial file list as expected. + +## Cause + +The root cause of the issue is that the `Files` parameter of the FileSelect component is not designed to be reactive. Consequently, changes made to this parameter at runtime do not automatically trigger the component to update or re-render with the new list of files. + +## Solution + +To ensure that the FileSelect component reflects changes made to the `Files` parameter, you’ll need to recreate the FileSelect component. + +`````Razor +@if (ShouldRenderFileSelect) +{ + +} + +@code { + private TelerikFileSelect FileSelectRef { get; set; } + private List InitialFiles = new(); + private List Files = new(); + private bool ShouldRenderFileSelect { get; set; } = true; + + protected override async Task OnInitializedAsync() + { + await LoadFiles(); + } + + private async Task LoadFiles() + { + // Simulate API call + await Task.Delay(500); + Files = await FetchFilesFromApi(); + + if (Files != null) + { + InitialFiles = Files.Select(file => new FileSelectFileInfo + { + Id = Guid.NewGuid().ToString(), + Name = file.Name!, + Extension = Path.GetExtension(file.FileName!), + Size = file.FileSize + }).ToList(); + } + + // Re-render the component to ensure changes are applied + ResetFileSelect(); + } + + private void ResetFileSelect() + { + ShouldRenderFileSelect = false; + StateHasChanged(); + + Task.Delay(1).ContinueWith(_ => + { + ShouldRenderFileSelect = true; + InvokeAsync(StateHasChanged); + }); + } + + private Task> FetchFilesFromApi() + { + // Mock API Response + return Task.FromResult(new List + { + new OSRFileInfoResponse { FileName = "document.pdf", FileSize = 1024 * 1024, Buffer = new byte[10] }, + new OSRFileInfoResponse { FileName = "image.jpg", FileSize = 2048 * 1024, Buffer = new byte[10] } + }); + } + + private void OnSelectHandler() + { + // OnSelect logic + } + + private void OnFileRemoved() + { + // OnRemove logic + } + + private void DownloadFileFromStream(byte[] buffer, string fileName) + { + // Simulate file download + } + + public class OSRFileInfoResponse + { + public byte[]? Buffer { get; set; } + public string? FileName { get; set; } + public long FileSize { get; set; } + + public string? Name => FileName?.Split("/").LastOrDefault(); + } +} +````` From facb6193fb1043eba4998616a8cb8bd4bf854908 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Thu, 10 Apr 2025 15:01:39 +0300 Subject: [PATCH 2/6] Update knowledge-base/fileselect-blazor-initial-files.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/fileselect-blazor-initial-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/fileselect-blazor-initial-files.md b/knowledge-base/fileselect-blazor-initial-files.md index 8bc2cb3bd7..0e37288a66 100644 --- a/knowledge-base/fileselect-blazor-initial-files.md +++ b/knowledge-base/fileselect-blazor-initial-files.md @@ -1,6 +1,6 @@ --- title: Initial Files not Displaying in FileSelect -description: Learn how to show initial files in the FileSelect component for Blazor. +description: Learn why initial files do not appear in the Blazor FileSelect component and how to display them correctly on initialization. type: troubleshooting page_title: How to Display Initial Files in Blazor FileSelect Component slug: fileselect-kb-blazor-initial-files From a9c2d6fbdb7231aaeed0bf7984b150ce656b8439 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Thu, 10 Apr 2025 15:01:48 +0300 Subject: [PATCH 3/6] Update knowledge-base/fileselect-blazor-initial-files.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/fileselect-blazor-initial-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/fileselect-blazor-initial-files.md b/knowledge-base/fileselect-blazor-initial-files.md index 0e37288a66..0829cafa01 100644 --- a/knowledge-base/fileselect-blazor-initial-files.md +++ b/knowledge-base/fileselect-blazor-initial-files.md @@ -1,5 +1,5 @@ --- -title: Initial Files not Displaying in FileSelect +title: Initial Files Do Not Display in Blazor FileSelect description: Learn why initial files do not appear in the Blazor FileSelect component and how to display them correctly on initialization. type: troubleshooting page_title: How to Display Initial Files in Blazor FileSelect Component From 47e9ff5f8376dd6fc1a71ca5083026de72906610 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Thu, 10 Apr 2025 15:01:59 +0300 Subject: [PATCH 4/6] Update knowledge-base/fileselect-blazor-initial-files.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/fileselect-blazor-initial-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/fileselect-blazor-initial-files.md b/knowledge-base/fileselect-blazor-initial-files.md index 0829cafa01..9c41187998 100644 --- a/knowledge-base/fileselect-blazor-initial-files.md +++ b/knowledge-base/fileselect-blazor-initial-files.md @@ -2,7 +2,7 @@ title: Initial Files Do Not Display in Blazor FileSelect description: Learn why initial files do not appear in the Blazor FileSelect component and how to display them correctly on initialization. type: troubleshooting -page_title: How to Display Initial Files in Blazor FileSelect Component +page_title: Initial Files Do Not Display in Blazor FileSelect slug: fileselect-kb-blazor-initial-files tags: fileselect, blazor, initial, files res_type: kb From 848d835d275b4c581a6a915281872bef8da5e098 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Thu, 10 Apr 2025 15:02:07 +0300 Subject: [PATCH 5/6] Update knowledge-base/fileselect-blazor-initial-files.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/fileselect-blazor-initial-files.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/fileselect-blazor-initial-files.md b/knowledge-base/fileselect-blazor-initial-files.md index 9c41187998..7a19de9b27 100644 --- a/knowledge-base/fileselect-blazor-initial-files.md +++ b/knowledge-base/fileselect-blazor-initial-files.md @@ -22,7 +22,7 @@ ticketid: 1683091 ## Description -In an attempt to display initial files in the [`FileSelect`](slug:fileselect-overview) component, the files are fetched from an API call and assigned to the Files parameter of the component. Despite this, the component does not render the initial file list as expected. +In an attempt to display initial files in the [`FileSelect`](slug:fileselect-overview) component, the files are fetched from an API call and assigned to the `Files` parameter of the component. Despite this, the component does not render the initial file list as expected. ## Cause From 1327db1eed678a552dd31961fb06c4acf16edbdc Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Thu, 10 Apr 2025 15:02:23 +0300 Subject: [PATCH 6/6] Update knowledge-base/fileselect-blazor-initial-files.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- .../fileselect-blazor-initial-files.md | 24 +++---------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/knowledge-base/fileselect-blazor-initial-files.md b/knowledge-base/fileselect-blazor-initial-files.md index 7a19de9b27..1036588032 100644 --- a/knowledge-base/fileselect-blazor-initial-files.md +++ b/knowledge-base/fileselect-blazor-initial-files.md @@ -32,19 +32,17 @@ The root cause of the issue is that the `Files` parameter of the FileSelect comp To ensure that the FileSelect component reflects changes made to the `Files` parameter, you’ll need to recreate the FileSelect component. -`````Razor +`````RAZOR @if (ShouldRenderFileSelect) { + Multiple="true" /> } @code { - private TelerikFileSelect FileSelectRef { get; set; } + private TelerikFileSelect? FileSelectRef { get; set; } private List InitialFiles = new(); private List Files = new(); private bool ShouldRenderFileSelect { get; set; } = true; @@ -97,21 +95,6 @@ To ensure that the FileSelect component reflects changes made to the `Files` par }); } - private void OnSelectHandler() - { - // OnSelect logic - } - - private void OnFileRemoved() - { - // OnRemove logic - } - - private void DownloadFileFromStream(byte[] buffer, string fileName) - { - // Simulate file download - } - public class OSRFileInfoResponse { public byte[]? Buffer { get; set; } @@ -121,4 +104,3 @@ To ensure that the FileSelect component reflects changes made to the `Files` par public string? Name => FileName?.Split("/").LastOrDefault(); } } -`````