Available in the OSS Version
File Upload - Progress Indicators
This sample illustrates the use of the getFileInfoData public method of the jQuery upload widget.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
You cannot upload files larger than 1 MB
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
The output of this method can be very useful for creating upload statistics.
Note: For demonstration purposes, uploaded files must be smaller than 1 MB. Any files you upload on this page are not retained on our servers.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<style type="text/css">
.container-info, .error-info { margin: 10px 0 ; font-weight: bold; }
.error-info { color: #FF0000; }
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<div id="igUpload1"></div>
<div class="container-info">
<label>
Average Speed:
<span id="speed">0</span>
KB/S
</label>
</div>
<div class="container-info">
<label>
Uploaded Files:
<span id="uploadedFiles">0</span>
</label>
</div>
<div class="container-info">
<label>
Uploaded:
<span id="uploaded">0</span>
KB
</label>
</div>
<div class="container-info">
<label>
To be uploaded:
<span id="toUpload">0</span>
KB
</label>
</div>
<div class="container-info">
<label>
Time Elapsed:
<span id="timeElapsed">0</span>
sec
</label>
</div>
<div class="container-info">
<label>
Time Left:
<span id="timeLeft">0</span>
sec
</label>
</div>
<div id="error" class="error-info">
You cannot upload files larger than 1 MB
</div>
<input type="hidden" id="hdnStartTimer" value="false"/>
<script>
$('#igUpload1').igUpload({
mode: 'multiple',
progressUrl: '/IGUploadStatusHandler.ashx',
maxUploadedFiles: 5,
maxSimultaneousFilesUploads: 2,
controlId: 'serverID1'
});
function showAlert(args) {
$("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
}
var timeOutID;
function startTimer() {
var currCount = parseInt($('#timeElapsed').html(), 10);
$('#timeElapsed').html(currCount + 1);
timeOutID = setTimeout('startTimer()', 1000);
}
function areAllFilesUploaded() {
var uploadInfo = $("#igUpload1").igUpload('getFileInfoData');
return uploadInfo.countTotalFiles === uploadInfo.countUploadingFiles;
}
function refreshProgressInformation() {
var uploadInfo = $("#igUpload1").igUpload('getFileInfoData'),
timeElapsed = parseInt($('#timeElapsed').html(), 10),
uploadSpeed;
if (timeElapsed === 0) {
uploadSpeed = 0;
} else {
uploadSpeed = Math.round(uploadInfo.fileSizeUploaded / (1024 * timeElapsed));
}
$("#uploadedFiles").html(uploadInfo.countUploadingFiles);
$("#uploaded").html(Math.round(uploadInfo.fileSizeUploaded / 1024));
$("#toUpload").html(Math.round((uploadInfo.fileSizeTotal - uploadInfo.fileSizeUploaded) / 1024));
$("#speed").html(uploadSpeed);
if (uploadSpeed === 0) {
$("#timeLeft").html(0);
} else {
$("#timeLeft").html(Math.round((uploadInfo.fileSizeTotal - uploadInfo.fileSizeUploaded) / (1024 * uploadSpeed)));
}
}
$(function () {
$("#error").css("display", "none");
$("#igUpload1").on({
iguploadfileuploading: function (e, args) {
if ($("#hdnStartTimer").val() === 'false') {
$("#hdnStartTimer").val('true');
startTimer();
}
refreshProgressInformation();
}
});
$("#igUpload1").on({
iguploadfileuploaded: function (e, args) {
refreshProgressInformation();
if (areAllFilesUploaded()) {
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
$("#error").css("display", "none");
}
});
$("#igUpload1").on({
iguploadfileuploadaborted: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload1").on({
iguploadcancelallclicked: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload1").on({
iguploadonerror: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
if (args.errorType === 'serverside' && args.errorCode === 2) {
$("#error").stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
}
}
});
});
</script>
</body>
</html>