UploaderTemplates with Progress and Thumbnails

[Andrew Wiley]

Requirements

1. On page load display some previously loaded files. This can be achieved using using a for loop to create
   
2. Next i want to display a thumbnail of the imaged, now this is relatively straight forward but by using an uploaderTemplate i loose the progress bar.
3. HOW do i replicate the progress bar in a UploaderTemplate?

Its worth mentioning i am using sever site webapi

[Sureshkumar P]

Hi Andrew,

We suggest you use the progressbar component to showcase the progress bar when using the uploader as a template feature.

Find the code example here:

<SfUploader @ref="uploderObj" ID="UploadFiles" AllowedExtensions=".png,.jpeg,jpg" SequentialUpload="true" Multiple="false">

                <UploaderEvents ValueChange="onChange" BeforeUpload="onBeforeUpload" OnRemove="onRemove" Success="onSuccess"></UploaderEvents>

                <UploaderTemplates>

                    <Template>

                        <span class="wrapper">

                            <img class="upload-image" alt="Image"

                                 src="@(files.Count >0 ? files.Where(item=>item.Name == context.Name)?.FirstOrDefault()?.Path : string.Empty)">

                        </span>

 

                        @if (isVisible)

                        {

                            <SfProgressBar Type="ProgressType.Linear" Height="40"

                                       Value="100" Minimum="0" Maximum="100" IsIndeterminate="true">

                                <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" />

                            </SfProgressBar>

                        }

                        <div class="name file-name" title="@(context.Name)">@(context.Name)</div>

                        <div class="file-size">@(context.Size)</div>

                        <span class="e-icons e-file-remove-btn remove" id="removeIcon" title="Remove"></span>

                        <span class="e-upload-icon e-icons e-file-remove-btn" title="Upload" id="iconUpload"></span>

                    </Template>

                </UploaderTemplates>

 

            </SfUploader>

public void onBeforeUpload(BeforeUploadEventArgs args)

    {

        isVisible = true;

    }

    public void onSuccess(SuccessEventArgs args)

    {

        isVisible = false;

    }

Find the sample in the attachment:

Regards,

Sureshkumar P

Attachment: BlazorApp2_47419403.zip