Progress indicator settings

[Michael Dunbar]

Hello,

Been working through the demos and documentation on this control. I have it working but I am struggling to get my head around how to set the values of the indicators. Here is my code:

private void UpdateProgressContext(UploadedFile file)
    {
        const int total = 100;

        RadProgressContext progress = RadProgressContext.Current;
        DateTime startTime = DateTime.Now;

        for (int i = 0; i < total; i++)
        {
            progress.PrimaryTotal = FileHelper.GetFileSize(file.ContentLength);
            progress.PrimaryValue = i; //TODO: file size
            progress.PrimaryPercent = i;

            progress.CurrentOperationText = file.GetName();

            TimeSpan elapsed = DateTime.Now.Subtract(startTime);
            progress.TimeElapsed = string.Format("{0:D2}:{1:D2}:{2:D2} s", elapsed.Hours, elapsed.Minutes, elapsed.Seconds);

            double estimatedMillisecons = 24 * 60 * 60 * 1000;
            if (i != 0)
            {
                estimatedMillisecons = total * elapsed.TotalMilliseconds / i;
            }

            TimeSpan estimated = TimeSpan.FromSeconds(1);
            if (estimatedMillisecons > 1)
            {
                estimated = TimeSpan.FromMilliseconds(estimatedMillisecons);
            }
            progress.TimeEstimated = string.Format("{0:D2}:{1:D2}:{2:D2} s", estimated.Hours, estimated.Minutes, estimated.Seconds);

            double speed = 0.0d;
            if (elapsed.TotalSeconds > 0)
            {
                speed = i / elapsed.TotalSeconds;
            }
            progress.Speed = string.Format("{0:0.00}", speed);

            if (!Response.IsClientConnected)
            {
                //Cancel button was clicked or the browser was closed, so stop processing
                break;
            }

            //Stall the current thread for 0.1 seconds
            System.Threading.Thread.Sleep(100);
        }
    }

I want a very simple indicator - 1 progress bar indicating the total file size of the file being uploaded, the value to be the number of bytes currently being processed and the percentage. I'd also like the estimated upload time and speed (in KB/s) to be displayed.

I'm just about there but the time, speed and bytes value is incorrect. I think because of the total I am setting (i.e. 100).

Thanks,

Michael

[Genady Sergeev]

Hi Michael Dunbar,

There is no need to dig into custom progress monitoring to obtain such functionality. You can use the ProgressIndicators enum instead. More information on the topic can be found here. In concern with your case, to obtain the desired view you can use the following combination of indicators:

using System;
using Telerik.Web.UI;
using Telerik.Web.UI.Upload;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, System.EventArgs e)
    {
        RadProgressArea1.ProgressIndicators =
            ProgressIndicators.CurrentFileName |
            ProgressIndicators.RequestSize |
            ProgressIndicators.TimeElapsed |
            ProgressIndicators.TimeEstimated |
            ProgressIndicators.TotalProgress |
            ProgressIndicators.TotalProgressBar |
            ProgressIndicators.TotalProgressPercent |
            ProgressIndicators.TransferSpeed;
    }

For your convenience I have prepared sample project. You can find it as an attachment.

Sincerely yours,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Michael Dunbar]

Sorry, I am confused with this. Your answer seemed to make sense but when I tried to implement it today it doesn't seem to work. I removed my custom code and simply set the progress indicators to be used as advised and the progress area no longer appears, even with a thread delay to slow the file upload down.

In your example code you have:

private void UpdateProgressArea()
    {
        //Set the RadProgressContext values which will be serialized on the client.
        //The values set here are just as an example
        RadProgressContext progress = RadProgressContext.Current;
        progress["PrimaryTotal"] = string.Format("{0} bytes", 1000);
        progress["PrimaryValue"] = string.Format("{0} bytes", 600);
        progress["PrimaryPercent"] = "60";
        progress["SecondaryPercent"] = "30";
        progress["CurrentOperationText"] = "MyTestFile.txt";
        progress["SecondaryTotal"] = string.Format("{0} file(s)", 1);
        progress["SecondaryValue"] = string.Format("{0} file(s)", 0);
        progress["Speed"] = "30KB/s";
        progress["TimeEstimated"] = "0:0:20s";
        progress["TimeElapsed"] = "0:0:3s";

        StringWriter writer = new StringWriter();
        progress.Serialize(writer);

        string script = string.Format(@"function displayProgressAreas() {{ {1};$find('{0}').update(rawProgressData);}}",
                    progressArea.ClientID, writer.GetStringBuilder().ToString());
        string script1 = "Sys.Application.add_load(function(){ displayProgressAreas();});";
        string script2 = String.Concat("<script type='text/javascript'> ", script, script1, " </script>");
        Page.ClientScript.RegisterStartupScript(this.GetType(), "DisplayProgressAreas", script2, false);
    }

Now obviously this shows up a nice static progress area but does it mean in order to display a dynamic progress area I need to define the values here dynamically? This brings me back to my original question if the case doesn't it?

Thanks,

Michael

[Genady Sergeev]

Hi Michael Dunbar,

I will try to make the things clear to your, since I think you have confused yourself a little bit.

1. By the time the server events fire, the files to upload are already uploaded, therefore you cannot slowdown the upload process using thread delay.
2. You do not have to implement a thing in the code behind in order to make the progress area work. The later will start monitoring the upload progress automatically, once the progress area handler is registered in the web-config and a form submit occur..
3. All the UpdateProgressArea methods that you might find in a different examples and forum threads serve for a custom progress monitoring, not for tracking the progress of a real file upload.
4. In the sample I provided you, the UpdateProgressArea method is used just for convenience. It's purpose is to show the how the progress area would look like if a regular file upload was in process. In your real project you do not have to use that method.

So, to sum up, in order the obtain the desired view of the progress area and start using it you need to do the following:

1. Use the progress indicator settings I provided you
2. Remove all the UpdateProgressArea methods 
3. Register the RadProgressArea handler in the web config, details can be found here.
4. Upload file larger than 20 mb, otherwise, on a localhost, you will be unable to see the progress area because the upload speed is that high, the file is uploaded before there is enough time for the area to show up.

Sample project is attached.
Best wishes,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Michael Dunbar]

Thank you. I am working on local host so am obviously not seeing it due to file size. I will test it up on a Live server later.