Available in the OSS Version

File Upload - TypeScript

This sample demonstrates the use of TypeScript for instantiating file upload.

Average Speed: 0 KB/S

Uploaded Files: 0

Uploaded: 0 KB

To be uploaded: 0 KB

Time Elapsed: 0 sec

Time Left: 0 sec

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

HTML
TypeScript

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.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);
            }
        }
    });
});

Ignite UI for jQuery | Samples

Search Results

File Upload - TypeScript

Code View