Available in the OSS Version
File Upload - TypeScript
This sample demonstrates the use of TypeScript for instantiating file upload.
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 getFileInfoData method is used to create 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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style type="text/css">
.container-info, .error-info {
margin: 10px 0;
font-weight: bold;
}
.error-info {
color: #FF0000;
}
</style>
</head>
<body>
<div id="igUpload"></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 src="/TypeScriptSamples/file-upload/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
$(function () {
function showAlert(args) {
$("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
}
var timeOutID;
var startTimer = function () {
var currCount = parseInt($('#timeElapsed').html(), 10);
$('#timeElapsed').html(String(currCount + 1));
timeOutID = setTimeout(startTimer, 1000);
}
function areAllFilesUploaded() {
var uploadInfo = $("#igUpload").igUpload('getFileInfoData');
//We use the keys countTotalFiles and countUploadingFiles to get the values acsociated with them
//knowing that we are getting and object FileInfoData
//Same techniqeue we use down for the other properties
return uploadInfo["countTotalFiles"] === uploadInfo["countUploadingFiles"];
}
function refreshProgressInformation() {
var uploadInfo = $("#igUpload").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(String(Math.round(uploadInfo["fileSizeUploaded"] / 1024)));
$("#toUpload").html(String(Math.round((uploadInfo["fileSizeTotal"] - uploadInfo["fileSizeUploaded"]) / 1024)));
$("#speed").html(uploadSpeed);
if (uploadSpeed === 0) {
$("#timeLeft").html(String(0));
} else {
$("#timeLeft").html(String(Math.round((uploadInfo["fileSizeTotal"] - uploadInfo["fileSizeUploaded"]) / (1024 * uploadSpeed))));
}
}
$('#igUpload').igUpload({
mode: 'multiple',
progressUrl: "/IGUploadStatusHandler.ashx",
maxUploadedFiles: 5,
maxSimultaneousFilesUploads: 2,
controlId: 'serverID1'
});
$("#error").css("display", "none");
$("#igUpload").on({
iguploadfileuploading: function (e, args) {
if ($("#hdnStartTimer").val() === 'false') {
$("#hdnStartTimer").val('true');
startTimer();
}
refreshProgressInformation();
}
});
$("#igUpload").on({
iguploadfileuploaded: function (e, args) {
refreshProgressInformation();
if (areAllFilesUploaded()) {
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
$("#error").css("display", "none");
}
});
$("#igUpload").on({
iguploadfileuploadaborted: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload").on({
iguploadcancelallclicked: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload").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);
}
}
});
});