How to center file upload progress area

 

Requirements
r.a.d.controls version	RadUpload 1.0.3 +
.NET version	1.x, 2.x
Visual Studio version	Visual Studio 2003, 2005
programming language	JavaScript
browser support	all browsers supported by r.a.d.controls

I wanted to share a script I wrote to keep RadUploadProgressArea centered while a large file is being uploaded.

For some reason, I haven't been able to tame the upload progress box. It appears in random places on our pages. If you can't see it, you don't even know if a file upload is taking place.

The attached script is invoked every time a chunk is transmitted. You can include it on a page directly or, better yet, move it to a separate JavaScript file and link to it so it gets cached (<script src="./CenterUploadArea.js"></script>).

To get it to work, you need to initialize the OnClientProgressUpdating property of a RadUploadProgressArea control instance:

RadUploadProgressArea1.OnClientProgressUpdating = "CenterUploadArea";

Remember to also wire RadUploadHttpModule in web.config:

<httpModules> 
    <add name="RadUploadModule"

 type="Telerik.WebControls.RadUploadHttpModule, RadUpload.Net2"/>

</httpModules>

With this setup, even if you scroll the browser window during a file upload, the progress area will get centered.
 

Hello Milan,

Thank you for the nice solution! I am adding 3000 telerik points to your account for the provided javascript code :)

Greetings,
Rumen
the telerik team

Hi there, I wonder if you can help, I've downloaded the ZIP file, extracted the JS file and linked to it from my .net page. I have tried to add the OnClientProgressUpdate method to a RadProgressArea but for some reason it's not centering on the page.

<rad:RadProgressArea ID="RadProgressArea1" OnClientProgressUpdate="CenterUploadArea();"
    runat="server"
    Skin="Gold">
    </rad:RadProgressArea>

Any help you could give would be appreciated, I am using VB not sure if that makes a difference?

Hi Graeme,

Thank you for contacting us.

The problem you experience is most probably due to the event in which you attach CenterUploadArea() function. In the current version of RadUpload the event is not OnClientProgressUpdate but OnClientProgressUpdating.

Please, let us know in case you need further assistance.

Best regards,
Sophy
the Telerik team