1. Home
  2. Forum
  3. Blazor
  4. Global progress bar

Global progress bar

Dear Support!

Would you please let me know how to create a global progress bar?

What we would like to do is to upload multiple images at once (sequentially & chunks) with image-preview and individual progress-bars and on the top of the page, we need a global progress bar. (If you can provide a sample with these options, would be very happy!)

Thanks a lot!
Tamas

10 Replies
PM Ponmani Murugaiyan Syncfusion Team January 18, 2021 12:38 PM UTC

Hi Tamas, 

Greetings from Syncfusion support. 

We checked your reported query. Before proceed further, we request you to provide the below details. 

  1. Elaborate more on the global progress bar with expected scenario and is common for all multiple images until upload?
  2. Share pictorial representation of expected requirement.

The above requested details will help us to check and provide further details at earliest. 

Regards, 
Ponmani M 


TL Tamas Littmann January 18, 2021 12:56 PM UTC

Dear Ponmani,

Blueimp's classic old Jquery File Upload has this feature, please check it:

What i would like to do with your uploader is the same:
If i select multiple image files, start the upload immediately using chunk-upload & sequential upload (these are easy, and works for me):
- show the individual progress bar AND a global progress bar on top of the list.
When finished, show a preview image and a remove button.

Thanks a lot!

PM Ponmani Murugaiyan Syncfusion Team January 28, 2021 06:33 PM UTC

Hi Tamas, 

Sorry for the inconvenience caused. 

We are facing complexity in our end in preparing custom sample. We will update the sample in 2 business days. We appreciate your patience until then. 

Regards, 
Ponmani M 


PM Ponmani Murugaiyan Syncfusion Team February 2, 2021 02:32 PM UTC

Hi Tamas, 

Thanks for the patience. 

We have prepared custom sample as per your requirement. Please find the sample below. 

div class="col-lg-12 control-section"> 
    <div class="control_wrapper"> 
        @if (isVisible) 
        { 
        <SfProgressBar Type="ProgressType.Linear" Height="60" 
                       Value="100" Minimum="0" Maximum="100" IsIndeterminate="true"> 
            <ProgressBarAnimation Enable="true" Duration="2000" Delay="0" /> 
        </SfProgressBar> 
        } 
        <div id="dropArea" style="height: auto; overflow: auto"> 
            <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> 
                        <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> 
 
        </div> 
    </div> 
</div> 
@code { 
private SfUploader uploderObj; 
    public bool isVisible { get; set; } = false; 
    private object selectedFile { get; set; } 
    public void onBeforeUpload(BeforeUploadEventArgs args) 
    { 
        isVisible = true; 
    } 
    public void onSuccess(SuccessEventArgs args) 
    { 
        isVisible = false; 
    } 
    ... 
} 

Output: 

 
 


Please get back us if you need further assistance. 

Regards, 
Ponmani M 


TL Tamas Littmann February 3, 2021 06:48 PM UTC

Dear Ponmani,

Thank you for your answer, however i am not sure this is what you want to answer/send me, or your answer is for a different topic and accidentally send it to me.
I asked 3-4 questions, and none of them (= zero) covered in your answer.

I read my previous posts and my questions seems understandable and clear and i don't know what i need to clarify more, but let me know.

I uploaded a few second video, not far what i need (the open/select multiple files are not recorder, just the upload progress itself.) In the video what you see:
after i open multiple files and click the upload button: all of the images are uploaded, all of the individual images have a progress bar, and top of it, there is one global progress bar shows the entire progress.

(I can easily change these to my preferences:
- chunk upload
- sequentially upload
- show a thumbnail
- start the upload immediately after selecting the files
- there must be remove buttons for the individual images as well as a global remove/clear/delete button.)

Thanks a lot!
Tamas

Attachment: jQueryFileUploadVideoDemo_Mp4_630f1999.zip

PM Ponmani Murugaiyan Syncfusion Team February 8, 2021 12:18 PM UTC

Hi Tamas, 

Sorry for the inconvenience caused. 

We are currently working on the requested requirement and facing complexities in our end. So, we will prepare custom sample and update further details in 2 business days (February 10, 2021). We appreciate your patience until then. 

Regards, 
Ponmani M 


PM Ponmani Murugaiyan Syncfusion Team February 15, 2021 02:45 AM UTC

Hi Tamas, 

Thanks for the patience. 

We would like to inform you that, we have modified the custom sample as per your requirement. Please find below. 

1. You can achieve Chunk Upload and Sequential Upload by enabling the respective properties as like below. Also, we would like to inform you that,  the name attribute must match the name of a parameter in the POST method. The name attribute is automatically generated from the control’s ID property. By using the name attribute in the Uploader component, we can get the file on the server side. We can give any name to the component Id but you can get the file on the server side by using the same Id name. Kindly refer the below code. 

<SfUploader ID="UploadFiles" @ref="uploadObj" AutoUpload="true" MaxFileSize="30000000" SequentialUpload="true"> 
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove" ChunkSize="500000"></UploaderAsyncSettings> 
    ... 
</SfUploader> 
 

2. You can start the upload immediately after selecting the files by disabling the AutoUpload property false. 

<SfUploader ID="UploadFiles" @ref="uploadObj" AutoUpload="true" MaxFileSize="30000000" SequentialUpload="true"> 
 

3. The requirement “there must be remove buttons for the individual images as well as a global remove/clear/delete button)” can be achieved using the public method ClearAll of Uploaded components will clear the uploaded files globally. Also, by default we have individual delete icon for remove the files.  

<button @onclick="@UpdateValue">Clear All Uploaded files</button> 

@code { 
    SfUploader uploadObj; 
    public void UpdateValue() 
    { 
        this.uploadObj.ClearAll(); 
    } 
} 
 

 
 



Kindly check with the above sample, which meets all your requirement. If we missed to achieve any of your requirement, please revert us with more details, which helps us to check and provide you the solution at earliest. 

Regards, 
Ponmani M 


JP Joel Padilla March 2, 2021 10:50 PM UTC

Hello, I'm also facing this issue. I want a global loading bar, but your solution only serves if we leave the bar as indeterminate, so there's no way to tell the customer what's the percentage of the upload. Is there a solution for that?

TL Tamas Littmann March 3, 2021 03:28 PM UTC

Hi,

(I've had enough with this support, they totally misunderstand the whole thing for months. Never ever encountered such a bad support.)

I've ended up with leave the whole Syncfusion FileUpload component and do it my own with the default Blazor ones (InputFile). I was need lots of customization, so i started from the ground.
Much easier then you think, simple add all of the filesizes (Total Amount), and from the beginning add every little uploaded piece (chunk) into the global progress bar. In Blazor you don't need to update any component, it's updated automatically.


PM Ponmani Murugaiyan Syncfusion Team March 6, 2021 10:47 AM UTC

Hi Tamas, 

Sorry for the inconvenience caused. We request you to share the details of issues faced in the provided sample project, which helps us to address the issue and provide you the expected requirement. 

Regards, 
Ponmani M 


Loader.
Up arrow icon