Infragistics jQuery File Upload Control

← PrevNext →

The jQuery File Upload control allows users to upload either Single or Multiples files at a time asynchronously using AJAX. It is a very useful control and it comes with many useful features. I have written couple of articles before on file uploads, the first one was about Multiple file upload using Microsoft Asp.Net and the second was about a jQuery Multifile Plug-in to upload Multiple files.

In both the articles, I have missed a very important part, that is, to show a progress bar to the users, while uploading the files. In-fact I have received many requests on how to add a progress bar with the file upload method. We all know how big deal it is to do that.

Thankfully, here we have a control that will spare us from writing that extra code. Engineers at Infragistics have taken care of this, by adding an in-built progress bar with the file upload control, and I personally thank them all for providing us with such a wonderful control.

Infragistics File Upload Control

It looks nice and neat. Is not it? Well, the looks are for the users. For us developers, it is lot more than just good looks. What matters most for us is performance. To find out how it performs, we need to see an example.

The Markup
<html>
<head>
    <title>Multiple File Upload</title>
    <link type="text/css" href="https://localhost:3595/SamplesCommon/jQuery/igRating/Common/style.css" 
        rel="stylesheet" />

    <link type="text/css" href="https://localhost:3595/SamplesBrowser/SamplesCommon/aspnet/Common/
            Styles/jquery/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link type="text/css" href="https://localhost:3595/SamplesBrowser/SamplesCommon/aspnet/Common/
            Styles/jquery/css/structure/infragistics.css" rel="stylesheet" />

    <script type="text/javascript" src="https://localhost:3595/SamplesBrowser/Scripts/jquery.min.js"></script>
    <script type="text/javascript" src="https://localhost:3595/SamplesBrowser/Scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://localhost:3595/SamplesBrowser/
                SamplesCommon/aspnet/Common/Scripts/jquery/js/infragistics.js"></script>
    <style> 
        body {
            font-family:Arial;
        } 
        .h2 { 
            font-size:13px; 
        }
    </style>
</head>
<body>
    <div style="width:500px;">
        <h2>Infragistics Web (File) Upload Control</h2>

	    <div id="uploadFile"></div>

        <div id="error-message" style="color: #FF0000; font-weight: bold;"></div>
    </div>
</body>

To begin with, first add the localized resources to the web page, which will have the file upload features. The resources include the JavaScript and CSS files. The JS files have the necessary functions and properties for the upload control. The CSS will give it a professional and interactive look.

Later, on the web page you will have to add a DIV element and set an ID. Look, carefully and you will see that I have not added any control on my web page. Instead, it is a client side jQuery widget, which will process the upload request.

The Script
<script>
    $(document).ready(function () {
        $(window).load(function () {
            $("#uploadFile").igUpload({
                mode: 'multiple',
                maxUploadedFiles: 5,
                maxSimultaneousFilesUploads: 2,
                progressUrl: "https://localhost:3595/samplesbrowser/IGUploadStatusHandler.ashx",
                onError: function (e, args) {
                    showAlert(args);
                }
            });
        });
        function showAlert(args) {
            $("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
        }
    });
</script>
</html>

WebUpload "Cancel" Button

When the upload is in progress, it will show a cancel button. If you are uploading multiple files at a time, then the control will display multiple cancel buttons. Therefore, your users will have an option to cancel the upload process, at will, for either single file or multiple files. Now, that is brilliant.

Once uploaded, the cancel button will disappear automatically. This is understandable. You can cancel an entire upload at the click of a single button.

WebUpload Progress Bar feature

The jQuery File upload widget offer many visual elements. The progress bar is one of the many features available with it. Like the cancel button, each file has its own progress bar. If you are uploading multiple files, all files will show the progress.

Conclusion

Its Asynchronous features make it a very useful control. You do not have to sit there and watch the progress. Instead, you can continue with your other work simultaneously.

However, there is one little problem with the control and its quiet visible. If you wish to upload multiple files, you need to select the files one by one by opening the File Upoad dialog repeatedly, before clicking the upload button. This is time consuming. Fixing this limitation early would benefit not only the developers but also users. Overall, it's a very nice and useful control.

← PreviousNext →