Available in the OSS Version

File Upload - Progress Manager

This sample demonstrates how to save file information on the server and access it when needed by using the UploadProgressManager on the server.

This sample is designed for a larger screen size.

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

Code View

Copy to Clipboard

ASP.NET View
ASP.NET Controller

                @using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models

<!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" />

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="http://igniteui.com/css/apiviewer.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>

    <!-- Used to add markup and provide logging 
        functionality for the API Explorer and API Viewer UI -->
    <script src="http://igniteui.com/js/apiviewer.js"></script>   
</head>
<body>

    @(
        Html.Infragistics().Upload()
        .ID("igUpload1")
        .Mode(UploadMode.Multiple)
        .AutoStartUpload(false)
        .ProgressUrl(Url.Content("~/IGUploadStatusHandler.ashx"))
        .ControlId("serverID3")
        .Render()
    )

    <div id="error-message" style="color: #FF0000; font-weight: bold;"></div>
    <div class="api-viewer"></div>
    <script type="text/javascript">
        $(function () {

            // Used to show output in the API Viewer at runtime,
            // defined in external script 'apiviewer.js'
            var apiViewer = new $.ig.apiViewer();

            $("#igUpload1").on("iguploadfileuploading",
                function (e, args) {
                    var message = "<div>" +
                        "File Id: " + args.fileId + "<br />" +
                        "File Path: " + args.filePath + "<br />" +
                        "File Status: " + args.fileStatus + "<br />" +
                        "Total Size: " + args.totalSize + "<br />" +
                        "Uploaded Bytes: " + args.uploadedBytes + "<br />" +
                        "</div>";

                    apiViewer.log(message);
                }
            );

            $("#igUpload1").on("iguploadonerror", function (e, args) {
                $("#error-message").html(args.serverMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
            });
        });
   </script>
</body>
</html>

                 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Infragistics.Web.Mvc;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class FileUploadController : Controller
    {
        private static Dictionary<String, Dictionary<string, string>> UploadedFiles
        {
            get
            {
                if (System.Web.HttpContext.Current.Cache["UploadedFiles"] == null)
                {
                    System.Web.HttpContext.Current.Cache["UploadedFiles"] = new Dictionary<String, Dictionary<string, string>>();
                }
                return (Dictionary<String, Dictionary<string, string>>)System.Web.HttpContext.Current.Cache["UploadedFiles"];
            }
        }

        [ActionName("aspnet-mvc-helper")]
        public ActionResult AspNetMvcHelper()
        {
            return View("aspnet-mvc-helper");
        }

        [ActionName("upload-progress-manager")]
        public ActionResult UploadProgrManager()
        {
            /* Code for registering the UploadProgressManager event handlers in the Global.asax file
               NOTE: igUpload event handlers should be registered only once
                protected void Application_Start()
                {
                    UploadProgressManager.Instance.AddFinishingUploadEventHandler("serverID3", FileUploadController.HandlerUploadFinishing);
                    UploadProgressManager.Instance.AddStartingUploadEventHandler("serverID3", FileUploadController.HandlerUploadStarting);
                }
            */
            return View("upload-progress-manager");
        }

        // NOTE: igUpload handlers are registered in the Global.asax file
        internal static void HandlerUploadStarting(object sender, UploadStartingEventArgs args)
        {
            Dictionary<String, Dictionary<string, string>> uploadedFiles = FileUploadController.UploadedFiles;
            string fileName = args.FileName;

            if (uploadedFiles.ContainsKey(fileName))
            {
                Dictionary<string, string> fileInfo = null;
                uploadedFiles.TryGetValue(fileName, out fileInfo);
                args.ServerMessage = String.Format("File already exists on server: {0}, {1}, {2}", fileInfo["fileName"], fileInfo["fileSize"], fileInfo["mimeType"]);
                args.Cancel = true;
            }
        }

        // NOTE: igUpload handlers are registered in the Global.asax file
        internal static void HandlerUploadFinishing(object sender, UploadFinishingEventArgs args)
        {
            string filePath = String.Format("{0}{1}", args.FolderPath, args.TemporaryFileName);
			UploadConfig.DeleteFile(sender, args);
            if (System.IO.File.Exists(filePath))
            {
                try
                {
                    string folderPath = args.FolderPath;
                    string fileName = args.FileName;
                    string mimeType = args.MimeType;
                    long fileSize = args.FileSize;

                    Dictionary<string, string> fileInfo = new Dictionary<string, string>();
                    fileInfo.Add("fileName", fileName);
                    fileInfo.Add("folderPath", folderPath);
                    fileInfo.Add("mimeType", mimeType);
                    fileInfo.Add("fileSize", fileSize.ToString());

                    Dictionary<String, Dictionary<string, string>> uploadedFiles = FileUploadController.UploadedFiles;
                    uploadedFiles.Add(args.FileName, fileInfo);
                }
                catch (Exception ex)
                {
                    args.ServerMessage = ex.Message;
                }

                args.Cancel = false;
            }
        }
    }
}

Ignite UI for jQuery | Samples

Search Results

File Upload - Progress Manager

Code View