ClientSide functionalities UploadBox & UploadProgress

The coolest part of any ASP.NET control lies in how highly it’s customizable, both on the client side and server side. The Syncfusion UploadBox and the UploadProgess controls provide a bundle of rich client-side options that would be a part of making any ASP.NET application complete. Some of the common business requirements with respect to integrating the upload module to any application are:

  • Support for multiple uploads.
  • Rich client-side and server-side API.
  • Built-in validations.
  • File filter support.
  • Support for information about the upload.

The Syncfusion UploadBox, along with the UploadProgress control, supports the above business requirements. One of the most needed client-side functionalities is checking the size of a file before uploading to the server. This can be achieved using ActiveXObject – Scripting.FileSystemObject. But this is not a reliable solution, as this works only if ActiveX is enabled/supported by the thin client.

Syncfusion UploadBox with UploadProgress in 2010 Vol. 3 will support validating the size of a file in JavaScript before the file is completely uploaded to the server. This will be achieved using the GetTotalFileSize() client-side method in the “ClientSideOnUploading” client event of the UploadBox. Below is a code snippet used to achieve this.

function checkSize() {
    var size = upbox.GetTotalFileSize(); //Get the size of the current file being uploaded         
    if (size > 314572800) {
        upbox.CancelUploadFile(); //Cancel the upload if the file size is greater than any value in bytes.
        return false;

This ClientSideOnUploading event will be called once the upload has started, so that the file size is retrieved through the UploadProgress module attached to the upload box. By using the ClientSideOnUploading event of the UploadBox, it is possible to do some business logic when the upload starts so that there is no need for waiting till the file is uploaded to the server, thereby saving time and bytes.


Share this post:

Related Posts

Leave a comment