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.
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.
<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.
<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.
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.