Предварительный просмотр добавленного локального изображения/видео в серверном приложении blazor без его загрузки на сер ⇐ C#

[Anonymous]

Я пытаюсь создать компонент загрузки, который просматривает видео или изображение перед его фактической загрузкой.

Код: Выделить всё

Video

Код: Выделить всё

int videoProgress = 0;
List videos = default!;
FileInfo? video;
string? videoUrl;
private async Task OnVideoCompletedAsync(IEnumerable _videos) {
videos = _videos.ToList();
Console.WriteLine($"[EVENT] Video Dropped : {videos.Count()}");
videos.ForEach(x => Console.WriteLine($"Name: {x.Name}, Size: {x.Size/1000000f} mb"));
video = videos[0].LocalFile;
videoUrl = await embedFiles(video, "video/mp4");
videoProgress = 0;
StateHasChanged();
}

private async Task embedFiles(FileInfo? fileInfo, string format) {
if(fileInfo == null) {
return null;
}
byte[] bytes = new byte[fileInfo.Length];
using(FileStream fileStream = fileInfo.OpenRead()) {
await fileStream.ReadAsync(bytes);
}
string url = await JSRuntime.InvokeAsync("bytesToDataURL", bytes, format);
Console.WriteLine($"[INFO] File URLs : {url}");
return url;
}

Код: Выделить всё

async function bytesToDataURL(bytes, format) {
const blob = new Blob([new Uint8Array(bytes)], format);
let url = URL.createObjectURL(blob);
console.log(url);
return url;
}

Но если я правильно понимаю, это загружает видео на сервер, а затем ему придется отправить его обратно клиенту в виде байтов, чтобы он создал URL-адрес большого двоичного объекта. Это подходит для файлов меньшего размера, но я считаю, что этот путь вперед и назад расточителен, когда у вас очень большие файлы. Я мог бы напрямую присоединить обработчик событий к FluentInputFile в JS, но это нарушило бы работу реальных обработчиков событий.


Подробнее здесь: https://stackoverflow.com/questions/793 ... -uploading