Available in the OSS Version

File Upload - Multiple Uploads

This sample shows you how to set our jQuery upload control to operate with multiple files.

Use a Single Request for Uploading Multiple Files

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The maxSimultaneousFilesUploads and maxUploadedFiles properties can be used to restrict the number of uploaded files when uploading more than one file. On HTML 5-enabled browsers (those which support multiple attributes on the input element), you can select multiple files at once from the Open File dialog or drag and drop the files from Windows Explorer directly on the igUpload component. 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

Show In JsFiddle

Copy to Clipboard

HTML

                    <!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>
        .s-clearfix {
            content: "";
            display: table;
            clear: both;
        }

        .mb10 {
            margin-bottom: 10px;
        }

        .ml5 {
            margin-left: 5px;
        }

        .mt4 {
            margin-top: 4px;
        }

        .border-box {
            box-sizing: border-box;
        }

        .igui-filter-f-left {
            float: left;
        }

        .igui-filter-f-right {
            float: right;
        }

        .igui-filter-checkbox label {
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="border-box igui-filter-checkbox">
        <div class="mb10 s-clearfix">
            <input class="mr5 igui-filter-f-left" id="useSingleRequestCheck" type="checkbox" />
            <label class="ml5 igui-filter-f-right mt4" for="useSingleRequestCheck">Use a Single Request for Uploading Multiple Files</label>
        </div>
    </div>

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

    <script>
        $(function () {
            var buttonLabel = $.ig.Upload.locale.labelUploadButton;
            if (Modernizr.input.multiple) {
                buttonLabel = "Drag and Drop Files Here <br/> or Click to Select From a Dialog";
            }
            $("#igUpload1").igUpload({
                mode: 'multiple',
                multipleFiles: true,
                maxUploadedFiles: 5,
                maxSimultaneousFilesUploads: 2,
                progressUrl: "/IGUploadStatusHandler.ashx",
                controlId: "serverID1",
                labelUploadButton: buttonLabel,
                onError: function (e, args) {
                    showAlert(args);
                }
            });
            if (Modernizr.input.multiple) {
                $(".ui-igstartupbrowsebutton").attr("style", "width: 320px; height: 80px;");
            }
            $("#useSingleRequestCheck").igCheckboxEditor({
                checked: false,
                valueChanged: function (evt, ui) {
                    $("#igUpload1").igUpload("option", "useSingleRequest", ui.newState);
                }
            });
        });

        function showAlert(args) {
            $("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
        }
    </script>

</body>
</html>

Ignite UI for jQuery | Samples

Search Results

File Upload - Multiple Uploads

Code View