как загрузить файлы и увидеть индикатор выполнения?

Question

привет, у меня проблема, я работаю с blazor и aspnet core, у меня уже есть компонент, uploads files, и при загрузке он показывает таблицу с данными загруженного мной файла, но я хочу это, когда при загрузке файла он показывает мне только имя и progress bar, пока файл загружается, но я не знаю, как это сделать.

это мой код для загрузки файлов:

<h3 class="text-center">Subir Archivo</h3>

<div class="input-group col-md-4">
    <div class="input-group-prepend">
        <span class="input-group-text"></span>
    </div>
    <div class="custom-file">
        <InputFile class="custom-file-input" id="inputGroupFile01" lang="es" multiple OnChange="HandleSelection" />
        <label class="custom-file-label" for="inputGroupFile01">Seleccionar Archivo...</label>
    </div>
</div>
<br />
@if (selectedFiles != null)
{
    <table class="table table-hover text-center">
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Tamaño en bytes</th>
                <th>Fecha de Modificación</th>
                <th>Tipo de Archivo</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var file in selectedFiles)
            {
                <tr>
                    <td>@file.Name</td>
                    <td>@file.Size</td>
                    <td>@file.LastModified</td>
                    <td>@file.Type</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    IFileListEntry[] selectedFiles;

    async Task HandleSelection(IFileListEntry[] files)
    {
        selectedFiles = files;
        foreach (var selectedFiles in files)
        {
            if (files != null)
            {
                var ms = new MemoryStream();
                await selectedFiles.Data.CopyToAsync(ms);
                var content = new MultipartFormDataContent {
                { new ByteArrayContent(ms.GetBuffer()), "\"Upload\"", selectedFiles.Name } };
                await Http.PostAsync("Upload", content);                             
            }
        }
    }
}

вот как это выглядит:

введите описание изображения здесь

Я хочу что-то вроде этого, но не знаю, насколько легко это сделать

Answer 1

В сети нет готового кода, отвечающего вашим требованиям. Syncfusion действительно имеет компонент, который соответствует тому, что вы ищете, но, к сожалению, вам нужна лицензия для его использования.

То, что упомянуто Umair , является наилучшим из возможных для загрузки файл в blazor, и это тоже без лицензии.

(100.0 * file.Data.Position / file.Size).ToString("0") даст вам процент чтения файла. Затем вы можете использовать bootstrap или любой другой индикатор выполнения для отслеживания вашего прогресса.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

В приведенном выше примере все, что вам нужно сделать, это изменить style и aria-valuenow стоимость. В Blazor ваш код будет выглядеть примерно так.

@{
    var progress = (100.0 * file.Data.Position / file.Size).ToString("0");
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="@($"width: {progress}%")" aria-valuenow="@progress" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
}

Позже вы можете поэкспериментировать с css, чтобы получить тот вид, который вам нужен.

Answer 2

Вы можете использовать эту библиотеку NuGet самим блейзером: Стив Сандерсон, и он написал сообщение в блоге о том, как его использовать.

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

file.OnDataRead += (sender, eventArgs) => InvokeAsync(StateHasChanged);

, которое даст процент, используя следующий код:

(100.0 * file.Data.Position / file.Size).ToString("0")

Полный код здесь с GitHub Стивена Сандерсона