Available in the Full Version

File Upload - ASP.NET MVC

This is a basic example of instantiating the file upload using the ASP.NET MVC helper.

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

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/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>

    @(
        Html.Infragistics().Upload()
        .ID("igUpload1")
        .Mode(UploadMode.Single)
        .AutoStartUpload(true)
        .ProgressUrl(Url.Content("~/IGUploadStatusHandler.ashx"))
        .ControlId("serverID1")
        .Render()
    )

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

    <script type="text/javascript">
        $(function () {
            $("#igUpload1").bind({ iguploadonerror: function (e, args) {
                $("#error-message").html(args.errorMessage).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 - ASP.NET MVC

Code View