how to upload files and see a progress bar?

user_11406791 0
Viewed 6566

hello I have a problem I am working with blazor and aspnet core, I already have a component that uploads files and when uploading it shows a table with the data of the file I uploaded, but I want that when uploading a file it shows me only the name and a progress bar while the file loads but I don't know how to do this.

this is my code to upload files:

<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);                             
            }
        }
    }
}

that's how it looks: enter image description here

enter image description here

I want something like this but I don't know how easy it is to do this

twitter-bootstrap blazor asp.net-core css c#
2 Answers

There isn't a ready made code available in web to meet your requirement. Syncfusion do have the component that matches what you are looking but unfortunately you need a license to use that.

What Umair mentioned is the best possible so far to upload a file in blazor and that too without a license.

(100.0 * file.Data.Position / file.Size).ToString("0") will give you the percentage of file read. Next, you can use bootstrap or any other progress bar to track your progress.

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

In above example, all you have to do is change style and aria-valuenow value. In Blazor your code will something look like this.

@{
    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>
}

Later, you can play around with css to give you exact look and feel you want.

user_35138480

You can use this NuGet library by the blazer man himself: Steve Sanderson and he has written a blog post on how to use it.

Basically, when the file is read and uploaded, you can hook up an event to read the status of file upload progress:

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

which will give the percentage using the below code:

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

Full code here from GitHub of Steven Sanderson

user_11588450
Related