Available in the OSS Version

File Upload - Basic Use

This sample shows how to instantiate the file upload in JavaScript.

This sample is designed for a larger screen size.

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

Note: For demonstration purposes, uploaded files must be smaller than 1 MB; however, the control can be used with any file size supported by the server/client (usually up to 2GB). Any files you upload on this page are not retained on our servers.

Code View

Show In JsFiddle

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

</head>
<body>

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

    <script>

        $(function () {
            $("#igUpload1").igUpload({
                mode: 'single',
                autostartupload: true,
                progressUrl: "/IGUploadStatusHandler.ashx",
                controlId: "serverID1",
                onError: function (e, args) {
                    showAlert(args);
                }
            });
        });

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

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'basic-usage.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

import { Component, NgModule } from '@angular/core';
import { IgUploadComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';

declare var jQuery: any;

@Component({
selector: 'my-app',
template: `<ig-upload id="upload1" (onError)="showAlert($event)" [(options)]='uploadOptions'></ig-upload>
			<div id="error-message" style="color: #FF0000; font-weight: bold;"></div>`
})

export class AppComponent {
    private uploadOptions: IgUpload;
    constructor() {
        this.uploadOptions = { 
            mode: 'single',
            autostartupload: true,
            progressUrl: "/IGUploadStatusHandler.ashx",
            controlId: "serverID1"
        }
	}
	showAlert($event) {
		jQuery("#error-message").html($event.ui.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
	}
}

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, IgUploadComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Ignite UI for jQuery Required Combined CSS Files -->
	<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
	<!-- 1. Load libraries -->
	<script src="/js/modernizr.min.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/jquery-ui.min.js"></script>

	<!-- ReactJS library -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="/igniteui/js/infragistics.core.js"></script>
	<script src="/igniteui/js/infragistics.lob.js"></script>
	<script src="/js-data/nw-products"></script>
	<!-- Ignite UI for jQuery ReactJS Files -->
	<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
	<div id="app">
		<!--Sample JSON Data-->
		<script type="text/babel">
			var App = React.createClass({
				render: function () {
					function showAlert(args) {
						$("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
					}
					return <IgUpload id="igUpload1" mode="single"
							autostartupload={true}
							progressUrl="/IGUploadStatusHandler.ashx"
							controlId="serverID1"
							onError={function (e, args) {showAlert(args);}}></IgUpload>
				}
			});
			ReactDOM.render(
				<App />,
				document.getElementById("app"));
		</script>
	</div>
	<div id="error-message" style="color: #FF0000; font-weight: bold;"></div>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

File Upload - Basic Use

Code View