[PR #1680] [MERGED] Improved FileInput Image Preview Rendering #2856

Open
opened 2026-01-29 18:20:46 +00:00 by claunia · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/1680
Author: @LegendOfLynkle
Created: 9/7/2024
Status: Merged
Merged: 9/8/2024
Merged by: @enchev

Base: masterHead: master


📝 Commits (1)

  • cbce56c fix(FileInput): Modified FileInput.razor to handle rendering the preview of an image correctly when using byte[] as the TValue instead of string. Added a corresponding demo to highlight this.

📊 Changes

4 files changed (+54 additions, -1 deletions)

View changed files

📝 Radzen.Blazor/RadzenFileInput.razor (+1 -1)
📝 Radzen.Blazor/RadzenFileInput.razor.cs (+17 -0)
RadzenBlazorDemos/Pages/FileInputByteArray.razor (+26 -0)
📝 RadzenBlazorDemos/Pages/FileInputPage.razor (+10 -0)

📄 Description

The RadzenFileInput component has support for byte[] in addition to the default of string, however when using byte[] the image preview would not display correctly as it would just reference Value directly for the src attribute of the preview img. This would result in something like the following:
CleanShot 2024-09-07 at 09 39 53

To address this I have added a new private get only property that will decode the Value if the TValue is of byte[]. This results in the image preview behaving normally eg:
CleanShot 2024-09-07 at 11 28 17

Additionally I have added a corresponding demo to the FileInput Demos to highlight this usage.

Pleases let me know if additional changes are required. I tried to keep things aligned style wise where I could and as this is my first PR on this project any feedback would be appreciated 😄


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/1680 **Author:** [@LegendOfLynkle](https://github.com/LegendOfLynkle) **Created:** 9/7/2024 **Status:** ✅ Merged **Merged:** 9/8/2024 **Merged by:** [@enchev](https://github.com/enchev) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (1) - [`cbce56c`](https://github.com/radzenhq/radzen-blazor/commit/cbce56c913f722ff11d82beafc0b8cdd3444b3b0) fix(FileInput): Modified FileInput.razor to handle rendering the preview of an image correctly when using byte[] as the TValue instead of string. Added a corresponding demo to highlight this. ### 📊 Changes **4 files changed** (+54 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/RadzenFileInput.razor` (+1 -1) 📝 `Radzen.Blazor/RadzenFileInput.razor.cs` (+17 -0) ➕ `RadzenBlazorDemos/Pages/FileInputByteArray.razor` (+26 -0) 📝 `RadzenBlazorDemos/Pages/FileInputPage.razor` (+10 -0) </details> ### 📄 Description The RadzenFileInput component has support for `byte[]` in addition to the default of `string`, however when using `byte[]` the image preview would not display correctly as it would just reference Value directly for the src attribute of the preview img. This would result in something like the following: ![CleanShot 2024-09-07 at 09 39 53](https://github.com/user-attachments/assets/255da44a-6263-430b-a7b8-4eee19389b3e) To address this I have added a new private get only property that will decode the Value if the TValue is of `byte[]`. This results in the image preview behaving normally eg: ![CleanShot 2024-09-07 at 11 28 17](https://github.com/user-attachments/assets/f5f01bf6-a34c-43c4-9efd-c385034ed74a) Additionally I have added a corresponding demo to the FileInput Demos to highlight this usage. Pleases let me know if additional changes are required. I tried to keep things aligned style wise where I could and as this is my first PR on this project any feedback would be appreciated 😄 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-29 18:20:47 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2856