We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

UploaderTemplates with Progress and Thumbnails


  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?
  4. Its worth mentioning i am using sever site webapi

1 Reply

SP Sureshkumar P Syncfusion Team March 17, 2023 09:56 AM UTC

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>



                        <span class="wrapper">

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

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



                        @if (isVisible)


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

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

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



                        <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>





public void onBeforeUpload(BeforeUploadEventArgs args)


        isVisible = true;


    public void onSuccess(SuccessEventArgs args)


        isVisible = false;


Find the sample in the attachment:


Sureshkumar P

Attachment: BlazorApp2_47419403.zip

Live Chat Icon For mobile
Up arrow icon