feature: change upload component's return object

SiemensIXBlazor/Components/Upload/Upload.razor.cs

@@ -1,6 +1,8 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using SiemensIXBlazor.Interops;
+using SiemensIXBlazor.Objects;
+using System.Text.Json;
 
 namespace SiemensIXBlazor.Components
 {
@@ -29,7 +31,7 @@ public partial class Upload
         [Parameter]
         public string UploadSuccessText { get; set; } = "Upload successful";
         [Parameter]
-        public EventCallback<byte[]> FileChangedEvent { get; set; }
+        public EventCallback<List<IXFile>> FileChangedEvent { get; set; }
 
         FileUploadInterop _fileUploadInterop;
 
@@ -44,9 +46,33 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
         }
 
         [JSInvokable]
-        public async void FileChanged(byte[] data)
+        public async void FileChanged(object[] files)
         {
-           await FileChangedEvent.InvokeAsync(data);
+            var ixFiles = ParseFileObject(files);
+            await FileChangedEvent.InvokeAsync(ixFiles);
+        }
+
+        private static List<IXFile> ParseFileObject(object[] fileObjects)
+        {
+            List<IXFile> ixFiles = new();
+
+            foreach (var fileObj in fileObjects)
+            {
+                var fileData = (JsonElement)fileObj;
+
+                // Extract file properties and base64 data
+                string fileName = fileData.GetProperty("name").GetString();
+                long fileSize = fileData.GetProperty("size").GetInt64();
+                string fileType = fileData.GetProperty("type").GetString();
+                string base64Data = fileData.GetProperty("data").GetString();
+
+                // Create a custom implementation of IBrowserFile
+                IXFile ixFile = new(fileName, fileSize, fileType, base64Data);
+
+                ixFiles.Add(ixFile);
+            }
+
+            return ixFiles;
         }
     }
 }

SiemensIXBlazor/Objects/IXFile.cs

@@ -0,0 +1,18 @@
+namespace SiemensIXBlazor.Objects
+{
+    public class IXFile
+    {
+        public string Name { get; }
+        public long Size { get; }
+        public string Type { get; }
+        public string Base64Data { get; }
+
+        public IXFile(string name, long size, string type, string base64Data)
+        {
+            Name = name;
+            Size = size;
+            Type = type;
+            Base64Data = base64Data;
+        }
+    }
+}

SiemensIXBlazor/wwwroot/js/interops/fileUploadInterop.js

@@ -1,8 +1,21 @@
 export function fileUploadEventHandler(caller, elementId, eventName, funtionName) {
     const element = document.getElementById(elementId);
     element.addEventListener(eventName, (e) => {
-        e.detail[0].arrayBuffer().then(data => {
-            caller.invokeMethodAsync(funtionName, new Uint8Array(data));
-        })
+        const files = e.detail;
+
+        const fileDataArray = [];
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            const reader = new FileReader();
+            reader.onloadend = function () {
+                const base64Data = reader.result.split(',')[1];
+                fileDataArray.push({ name: file.name, size: file.size, type: file.type, data: base64Data });
+
+                if (fileDataArray.length === files.length) {
+                    caller.invokeMethodAsync(funtionName, fileDataArray);
+                }
+            };
+            reader.readAsDataURL(file);
+        }
     })
 }