Implemented chunked uploading. Updated mooncore

This commit is contained in:
2025-03-20 16:23:27 +01:00
parent 420ff46ceb
commit 55a8cfad46
8 changed files with 76 additions and 148 deletions

View File

@@ -2,7 +2,6 @@
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;
@@ -14,7 +13,6 @@ 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; } =
@@ -31,12 +29,15 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
}
];
public SysFileSystemProvider(HttpApiClient httpApiClient, DownloadService downloadService, LocalStorageService localStorageService, XmlHttpClient xmlHttpClient)
public SysFileSystemProvider(
HttpApiClient httpApiClient,
DownloadService downloadService,
LocalStorageService localStorageService
)
{
HttpApiClient = httpApiClient;
DownloadService = downloadService;
LocalStorageService = localStorageService;
XmlHttpClient = xmlHttpClient;
}
public async Task<FileSystemEntry[]> List(string path)
@@ -57,11 +58,7 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
public async Task Create(string path, Stream stream)
{
var content = new MultipartFormDataContent();
content.Add(new StreamContent(stream), "file", "x");
await HttpApiClient.Post($"{BaseApiUrl}/create?path={path}", content);
await Upload(_ => Task.CompletedTask, path, stream);
}
public async Task Move(string oldPath, string newPath)
@@ -74,45 +71,46 @@ public class SysFileSystemProvider : IFileSystemProvider, ICompressFileSystemPro
=> await HttpApiClient.Post($"{BaseApiUrl}/mkdir?path={path}");
public async Task<Stream> Read(string path)
=> await HttpApiClient.GetStream($"{BaseApiUrl}/read?path={path}");
=> await HttpApiClient.GetStream($"{BaseApiUrl}/download?path={path}");
public async Task Download(Func<long, Task> updateProgress, string path, string fileName)
public async Task Download(Func<int, Task> updateProgress, string path, string fileName)
{
var accessToken = await LocalStorageService.GetString("AccessToken");
await DownloadService.DownloadUrl(fileName, $"{BaseApiUrl}/read?path={path}", async (bytes, _) =>
{
await updateProgress.Invoke(bytes);
}, headers =>
{
headers.Add("Authorization", $"Bearer {accessToken}");
});
await DownloadService.DownloadUrl(fileName, $"{BaseApiUrl}/download?path={path}",
async (loaded, total) =>
{
var percent = total == 0 ? 0 : (int)Math.Round((float)loaded / total * 100);
await updateProgress.Invoke(percent);
},
onConfigureHeaders: headers => { headers.Add("Authorization", $"Bearer {accessToken}"); }
);
}
public async Task Upload(Func<long, Task> updateProgress, string path, Stream stream)
public async Task Upload(Func<int, Task> updateProgress, string path, Stream stream)
{
var tcs = new TaskCompletionSource();
var accessToken = await LocalStorageService.GetString("AccessToken");
var size = stream.Length;
var chunkSize = ByteConverter.FromMegaBytes(20).Bytes;
var chunks = size / chunkSize;
chunks += size % chunkSize > 0 ? 1 : 0;
await using var request = await XmlHttpClient.Create();
request.OnUploadProgress += async ev =>
for (var chunkId = 0; chunkId < chunks; chunkId++)
{
await updateProgress.Invoke(ev.Loaded);
};
var percent = (int)Math.Round((chunkId + 1f) / chunks * 100);
await updateProgress.Invoke(percent);
var buffer = new byte[chunkSize];
var bytesRead = await stream.ReadAsync(buffer);
request.OnLoadend += _ =>
{
tcs.SetResult();
return Task.CompletedTask;
};
var uploadForm = new MultipartFormDataContent();
uploadForm.Add(new ByteArrayContent(buffer, 0, bytesRead), "file", path);
await request.Open("POST", $"{BaseApiUrl}/create?path={path}");
await request.SetRequestHeader("Authorization", $"Bearer {accessToken}");
await request.SendFile(stream, "file", "file");
await tcs.Task;
await HttpApiClient.Post(
$"{BaseApiUrl}/upload?path={path}&totalSize={size}&chunkId={chunkId}",
uploadForm
);
}
}
public async Task Compress(CompressType type, string path, string[] itemsToCompress)

View File

@@ -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.7" />
<PackageReference Include="MoonCore.Blazor.Tailwind" Version="1.3.9" />
</ItemGroup>
<!--

View File

@@ -7,7 +7,6 @@ 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;
@@ -146,8 +145,6 @@ public class Startup
WebAssemblyHostBuilder.Services.AddMoonCoreBlazorTailwind();
WebAssemblyHostBuilder.Services.AddScoped<LocalStorageService>();
WebAssemblyHostBuilder.Services.AddScoped<XmlHttpClient>();
WebAssemblyHostBuilder.Services.AddScoped<ThemeService>();
WebAssemblyHostBuilder.Services.AutoAddServices<Program>();

View File

@@ -4,7 +4,6 @@
@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")]
@@ -12,13 +11,12 @@
@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"/>
</div>
<FileManager FileSystemProvider="FileSystemProvider"/>
<FileManager FileSystemProvider="FileSystemProvider" MaxUploadSize="4096"/>
@code
{
@@ -29,8 +27,7 @@
FileSystemProvider = new SysFileSystemProvider(
ApiClient,
DownloadService,
LocalStorageService,
XmlHttpClient
LocalStorageService
);
}
}

View File

@@ -32,7 +32,6 @@
<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>

View File

@@ -19,7 +19,7 @@ window.moonCoreDownloadService = {
const now = Date.now();
if (now - lastReportTime >= 500) { // Only log once per second
await reportRef.invokeMethodAsync("ReceiveReport", id, receivedLength, false);
await reportRef.invokeMethodAsync("ReceiveReport", id, receivedLength, -1, false);
lastReportTime = now;
}
}
@@ -31,11 +31,11 @@ window.moonCoreDownloadService = {
this.downloadBlob(fileName, blob);
if (reportRef)
await reportRef.invokeMethodAsync("ReceiveReport", id, receivedLength, true);
await reportRef.invokeMethodAsync("ReceiveReport", id, receivedLength, -1, true);
resolve();
});
await promise;
},
downloadUrl: async function (fileName, url, reportRef, id, headers) {
@@ -48,7 +48,7 @@ window.moonCoreDownloadService = {
for(let headerKey in headers) {
loadRequest.setRequestHeader(headerKey, headers[headerKey]);
}
loadRequest.responseType = "blob";
if (reportRef) {
@@ -56,25 +56,25 @@ window.moonCoreDownloadService = {
const now = Date.now();
if (now - lastReported >= 500) {
await reportRef.invokeMethodAsync("ReceiveReport", id, ev.loaded, false);
await reportRef.invokeMethodAsync("ReceiveReport", id, ev.loaded, ev.total, false);
lastReported = now;
}
};
loadRequest.onloadend = async ev => {
await reportRef.invokeMethodAsync("ReceiveReport", id, ev.loaded, true);
await reportRef.invokeMethodAsync("ReceiveReport", id, ev.loaded, ev.total, true);
}
}
loadRequest.onload = _ => {
this.downloadBlob(fileName, loadRequest.response);
resolve();
}
loadRequest.send();
});
await promise;
},
downloadBlob: function (fileName, blob)

View File

@@ -1,80 +0,0 @@
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);
}
}