Improved upload progress tracking. Fixed path on frontend export

Moonlight.ApiServer/Services/FrontendService.cs

@@ -91,7 +91,7 @@ public class FrontendService
         if (wasmMainFile is NotFoundFileInfo || string.IsNullOrEmpty(wasmMainFile.PhysicalPath))
             throw new HttpApiException("Unable to find wasm location", 500);
 
-        var wasmPath = Path.GetDirectoryName(wasmMainFile.PhysicalPath)!;
+        var wasmPath = Path.GetDirectoryName(wasmMainFile.PhysicalPath)! + "/";
 
         // Load and check the blazor framework files
         var blazorFile = WebHostEnvironment.WebRootFileProvider.GetFileInfo("_framework/blazor.webassembly.js");
@@ -99,7 +99,7 @@ public class FrontendService
         if (blazorFile is NotFoundFileInfo || string.IsNullOrEmpty(blazorFile.PhysicalPath))
             throw new HttpApiException("Unable to find blazor location", 500);
 
-        var blazorPath = Path.GetDirectoryName(blazorFile.PhysicalPath)!;
+        var blazorPath = Path.GetDirectoryName(blazorFile.PhysicalPath)! + "/";
 
         // Create zip
         var memoryStream = new MemoryStream();
@@ -124,7 +124,7 @@ public class FrontendService
         // Add plugin wwwroot files
         foreach (var pluginPath in PluginService.LoadedPlugins.Values)
         {
-            var wwwRootPluginPath = Path.Combine(pluginPath, "wwwroot");
+            var wwwRootPluginPath = Path.Combine(pluginPath, "wwwroot/");
 
             if (!Directory.Exists(wwwRootPluginPath))
                 continue;

Moonlight.Client/Implementations/SysFileSystemProvider.cs

@@ -2,6 +2,7 @@
 using MoonCore.Blazor.Tailwind.Fm;
 using MoonCore.Blazor.Tailwind.Fm.Models;
 using MoonCore.Blazor.Tailwind.Services;
+using MoonCore.Blazor.Tailwind.Xhr;
 using MoonCore.Helpers;
 using Moonlight.Shared.Http.Requests.Admin.Sys.Files;
 using Moonlight.Shared.Http.Responses.Admin.Sys;
@@ -13,6 +14,7 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
     private readonly DownloadService DownloadService;
     private readonly HttpApiClient HttpApiClient;
     private readonly LocalStorageService LocalStorageService;
+    private readonly XmlHttpClient XmlHttpClient;
     private readonly string BaseApiUrl = "api/admin/system/files";
 
     public CompressType[] CompressTypes { get; } =
@@ -29,11 +31,12 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
         }
     ];
 
-    public SysFileSystemProvider(HttpApiClient httpApiClient, DownloadService downloadService, LocalStorageService localStorageService)
+    public SysFileSystemProvider(HttpApiClient httpApiClient, DownloadService downloadService, LocalStorageService localStorageService, XmlHttpClient xmlHttpClient)
     {
         HttpApiClient = httpApiClient;
         DownloadService = downloadService;
         LocalStorageService = localStorageService;
+        XmlHttpClient = xmlHttpClient;
     }
 
     public async Task<FileSystemEntry[]> List(string path)
@@ -88,26 +91,28 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
 
     public async Task Upload(Func<long, Task> updateProgress, string path, Stream stream)
     {
-        var cts = new CancellationTokenSource();
+        var tcs = new TaskCompletionSource();
+        var accessToken = await LocalStorageService.GetString("AccessToken");
         
-        Task.Run(async () =>
+        await using var request = await XmlHttpClient.Create();
-        {
-            while (!cts.IsCancellationRequested)
-            {
-                await updateProgress.Invoke(stream.Position);
-                await Task.Delay(TimeSpan.FromMilliseconds(500), cts.Token);
-            }
-        });
 
-        try
+        request.OnUploadProgress += async ev =>
         {
-            await Create(path, stream);
+            await updateProgress.Invoke(ev.Loaded);
-        }
+        };
-        finally
+
+        request.OnLoadend += _ =>
         {
-            // Ensure we aren't creating an endless loop ^^
+            tcs.SetResult();
-            await cts.CancelAsync();
+            return Task.CompletedTask;
-        }
+        };
+
+        await request.Open("POST", $"{BaseApiUrl}/create?path={path}");
+        await request.SetRequestHeader("Authorization", $"Bearer {accessToken}");
+
+        await request.SendFile(stream, "file", "file");
+
+        await tcs.Task;
     }
 
     public async Task Compress(CompressType type, string path, string[] itemsToCompress)

Moonlight.Client/Moonlight.Client.csproj

@@ -27,7 +27,7 @@
         <PackageReference Include="MoonCore" Version="1.8.5" />
         <PackageReference Include="MoonCore.Blazor" Version="1.2.9" />
         <PackageReference Include="MoonCore.PluginFramework" Version="1.0.5"/>
-        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.3.6" />
+        <PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.3.7" />
     </ItemGroup>
 
     <!-- 

Moonlight.Client/Startup.cs

@@ -7,6 +7,7 @@ using Microsoft.JSInterop;
 using MoonCore.Blazor.Services;
 using MoonCore.Blazor.Tailwind.Extensions;
 using MoonCore.Blazor.Tailwind.Auth;
+using MoonCore.Blazor.Tailwind.Xhr;
 using MoonCore.Extensions;
 using MoonCore.Helpers;
 using Moonlight.Client.Interfaces;
@@ -145,6 +146,8 @@ public class Startup
         WebAssemblyHostBuilder.Services.AddMoonCoreBlazorTailwind();
         WebAssemblyHostBuilder.Services.AddScoped<LocalStorageService>();
 
+        WebAssemblyHostBuilder.Services.AddScoped<XmlHttpClient>();
+
         WebAssemblyHostBuilder.Services.AddScoped<ThemeService>();
         
         WebAssemblyHostBuilder.Services.AutoAddServices<Program>();

Moonlight.Client/UI/Views/Admin/Sys/Files.razor

@@ -4,6 +4,7 @@
 @using MoonCore.Blazor.Services
 @using MoonCore.Helpers
 @using MoonCore.Blazor.Tailwind.Fm
+@using MoonCore.Blazor.Tailwind.Xhr
 @using Moonlight.Client.Implementations
 
 @attribute [RequirePermission("admin.system.overview")]
@@ -11,12 +12,13 @@
 @inject HttpApiClient ApiClient
 @inject DownloadService DownloadService
 @inject LocalStorageService LocalStorageService
+@inject XmlHttpClient XmlHttpClient
 
 <div class="mb-3">
-    <NavTabs Index="2" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks" />
+    <NavTabs Index="2" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
 </div>
 
-<FileManager FileSystemProvider="FileSystemProvider" />
+<FileManager FileSystemProvider="FileSystemProvider"/>
 
 @code
 {
@@ -24,6 +26,11 @@
 
     protected override void OnInitialized()
     {
-        FileSystemProvider = new SysFileSystemProvider(ApiClient, DownloadService, LocalStorageService);
+        FileSystemProvider = new SysFileSystemProvider(
+            ApiClient,
+            DownloadService,
+            LocalStorageService,
+            XmlHttpClient
+        );
     }
 }

Moonlight.Client/wwwroot/index.html

@@ -32,6 +32,7 @@
     <script src="/js/fileManager.js"></script>
     <script src="/js/codeEditor.js"></script>
     <script src="/js/keyBinds.js"></script>
+    <script src="/js/xmlHttpRequest.js"></script>
     <script src="/ace/ace.js"></script>
     <script src="/_framework/blazor.webassembly.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>

Moonlight.Client/wwwroot/js/xmlHttpRequest.js

@@ -0,0 +1,80 @@
+window.moonCoreXmlHttpRequest = {
+    storage: {},
+    initialize: function (trackingId, refObject) {
+        const req = new XMLHttpRequest();
+
+        req.addEventListener("timeout", async ev => {
+            await refObject.invokeMethodAsync("TriggerTimeoutEvent", {
+                "loaded": ev.loaded,
+                "total": ev.total
+            });
+        });
+
+        req.addEventListener("progress", async ev => {
+            await refObject.invokeMethodAsync("TriggerDownloadProgressEvent", {
+                "loaded": ev.loaded,
+                "total": ev.total
+            });
+        });
+
+        req.upload.addEventListener("progress", async ev => {
+            await refObject.invokeMethodAsync("TriggerUploadProgressEvent", {
+                "loaded": ev.loaded,
+                "total": ev.total
+            });
+        });
+
+        req.addEventListener("loadend", async ev => {
+            await refObject.invokeMethodAsync("TriggerLoadedEvent", ev);
+        });
+
+        req.addEventListener("readystatechange", async _ => {
+            await refObject.invokeMethodAsync("TriggerReadyStateChangeEvent", req.readyState);
+        });
+
+        this.storage[trackingId] = req;
+
+        return req;
+    },
+    setProperty: function (trackingId, property, value) {
+        this.storage[trackingId][property] = value;
+        console.log(this.storage[trackingId]);
+    },
+    getProperty: function (trackingId, property) {
+        return this.storage[trackingId][property];
+    },
+    sendStream: async function (trackingId, streamRef) {
+        const stream = await streamRef.stream();
+        const blob = await this.streamToBlob(stream);
+        this.storage[trackingId].send(blob);
+    },
+    sendFile: async function (trackingId, formName, fileName, streamRef) {
+        const stream = await streamRef.stream();
+        const blob = await this.streamToBlob(stream);
+
+        const formData = new FormData();
+        formData.append(formName, blob, fileName);
+
+        this.storage[trackingId].send(formData);
+    },
+    getResponseStream: function (trackingId) {
+        return this.storage[trackingId].response;
+    },
+    dispose: function (trackingId) {
+        this.storage[trackingId] = undefined;
+    },
+    streamToBlob: async function (stream) {
+        const reader = stream.getReader();
+
+        let chunks = [];
+
+        while (true) {
+            const {done, value} = await reader.read();
+            if (done) break;
+
+            chunks.push(value);
+        }
+
+        return new Blob(chunks);
+    }
+}