This example demonstrates how to enable drag-and-drop support in the Upload Control extension and allow users to upload multiple files simultaneously. Once a user uploads files on the server, links to the uploaded files appear in the Round Panel below the Upload Control.

Follow the steps below to allow users to upload multiple files and display links to uploaded files on a web page:

1. Add the Upload Control extension to a view. To do this, you can use the Insert Extension Wizard or write the extension code manually.

2. In the Global.asax or RouteConfig file, add the .ashx file extension to route exceptions:

   routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
   routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");

3. Place the Round Panel extension below the Upload Control:

   @Html.DevExpress().RoundPanel(settings => {
       settings.Name = "RoundPanel";
       settings.HeaderText = "Uploaded Files";
       settings.SetContent(() => { ViewContext.Writer.Write("<div id='fileContainer'/>"); });
   }).GetHtml()

4. Configure settings of the Upload Control extension. Set the extension's UploadMode property to Advanced to enable advanced upload mode. To allow users to upload multiple files, set the EnableMultiSelect property to true. The EnableDragAndDrop property specifies if drag-and-drop operations are enabled.

   @Html.DevExpress().UploadControl(settings => {
       settings.Name = "UploadControl";
       settings.ShowUploadButton = true;
       settings.ShowProgressPanel = true;
       settings.UploadMode = DevExpress.Web.UploadControlUploadMode.Advanced;
       settings.AdvancedModeSettings.EnableMultiSelect = true;
       settings.AdvancedModeSettings.EnableFileList = true;
       settings.AdvancedModeSettings.EnableDragAndDrop = true;
       settings.ClientSideEvents.FilesUploadComplete = "OnFilesUploadComplete";
   }).GetHtml()

5. Call the Html.BeginForm method overload to wrap the Upload Control in the <form> HTML tag. To set the tag's action attribute, pass a name of an action method to the BeginForm method:

   @using (Html.BeginForm("UploadControlUpload", "Home")) {
       @Html.DevExpress().UploadControl(settings => {
           // ...
       }).GetHtml()
   }

6. In the action method, call the Upload Control's GetUploadedFiles method overload to get the uploaded files and handle the server-side FilesUploadComplete event:

   public ActionResult UploadControlUpload() {
       string[] errors;
       UploadedFile[] files = UploadControlExtension.GetUploadedFiles("UploadControl",
           MyUploadControlValidationSettings.Settings, out errors, (s, e) => { },
           UploadControl_FilesUploadComplete);
       return null;
   }

7. In the FilesUploadComplete event handler, save the uploaded files on the server. Write names of uploaded files and their URLs to a string. Assign this string to the CallbackData event argument to pass the string to the client:

   public void UploadControl_FilesUploadComplete(object sender, FilesUploadCompleteEventArgs e) {
       UploadedFile[] files = ((MVCxUploadControl)sender).UploadedFiles;
       for (int i = 0; i < files.Length; i++) {
           if (files[i].IsValid && !string.IsNullOrWhiteSpace(files[i].FileName)) {
               string resultFilePath = "~/Content/" + files[i].FileName;
               files[i].SaveAs(System.Web.HttpContext.Current.Request.MapPath(resultFilePath)); 
               string file = string.Format("{0} ({1}KB)", files[i].FileName, files[i].ContentLength / 1024);
               string url = ((IUrlResolutionService)sender).ResolveClientUrl(resultFilePath);
               e.CallbackData += file + "|" + url + "|";
           }
       }
   }

8. Handle the Upload Control's client-side FilesUploadComplete event. The callbackData event argument contains the string passed from the server. Get file names and URLs from the string and use them to display links to the uploaded files in the Round Panel:

   function OnFilesUploadComplete(s, e) {
       var data = e.callbackData.split('|');
       for (var i = 0; i < data.length; i += 2) {
           var file = data[i];
           var url = data[i + 1];
           var link = document.createElement('A');
           link.innerHTML = file;
           link.setAttribute('href', url);
           link.setAttribute('target', '_blank');
           var fileContainer = document.getElementById('fileContainer');
           fileContainer.appendChild(link);
           fileContainer.appendChild(document.createElement('BR'));
       }
   }

• HomeController.cs (VB: HomeController.vb)
• UploadControlValidationSettings.cs (VB: UploadControlValidationSettings.vb)
• Index.cshtml (VB: Index.vbhtml)

• Upload Modes

• Upload Control for ASP.NET MVC - How to bind uploaded files to a model
• Upload Control for ASP.NET MVC - How to upload a file