Friday, 11 January 2013

Creating Asynchrous File Uploader in MVC3 with Kendo UI



Asynchronous Upload
View: UploadFile.cshtml
@using Kendo.Mvc.UI
@{
    ViewBag.Title = "UploadFile";
    //Layout = "~/Views/Shared/_PlainLayout.cshtml";
}

<h2>Upload File</h2>

<div style="width:45%">
    @(Html.Kendo().Upload()
          .Name("files")
          .Async(a => a
                          .Save("SaveFiles", "Upload")
                          .Remove("RemoveFiles", "Upload")
                          .AutoUpload(true)
          )
          )
</div>

<script type="text/javascript">
    $(document).ready(function () {
       
        $(".k-dropzone").css("height","100px");

    });
</script>
<script src="~/Scripts/kendo.all.min.js"></script>
<link href="~/Content/kendo.common.min.css" rel="stylesheet" />

Controller:
  public class UploadController : Controller
    {
        public ActionResult UploadFile()
        {
            return View();
        }

        public ActionResult SaveFiles(IEnumerable<HttpPostedFileBase> files)
        {
            if (files != null)
            {
                foreach (var file in files)
                {
                   
                    var fileName = Path.GetFileName(file.FileName);
                    var physicalPath = Path.Combine(Server.MapPath("~/Content/UploadFile"), fileName);

                    // Saving the File
                    file.SaveAs(physicalPath);
                }
            }

            // Return an empty string to signify success
            return Content("");
        }

        public ActionResult RemoveFiles(string[] fileNames)
        {
           if (fileNames != null)
            {
                foreach (var fullName in fileNames)
                {
                    var fileName = Path.GetFileName(fullName);
                    var physicalPath = Path.Combine(Server.MapPath("~/Content/UploadFile"), fileName);

                   

                    if (System.IO.File.Exists(physicalPath))
                    {
                        // Deleting the File from the Location
                         System.IO.File.Delete(physicalPath);
                    }
                }
            }
            return Content("");
        }
    }

Calling to the File Upload Control
$('#Searchwindow').kendoWindow({
        title: "Upload File",
        content: "/Upload/UploadFile",
        height: "400px",
        width: "600px",
        iframe: true,
        visible: false
    }).data('kendoWindow').center();
<div id="grid">
            <div id="Searchwindow"></div>
</div>

Error n(e.g. 8 or 12)Files has invalid value "<<<<<<< .mine". Illegal characters in path.

I got some peculiar error after taking the update of the solution  from SVN.
So in order to fix it i tried a lot of way but unable to find out the issue as it doesn't show the file where  .>>>>>>>>>>>>>>>>> mine or .<<<<<<<<<<<< mine exists. After a through review i find out that it is due to the different version of the files in the respective folder where .obj folder is there.


So, in order to fix this issue, just go to the respective folder and delete the version-ed file names or delete the old ones and rename the latest file to the original one.

The other approach is simply delete the /obj folder in each project that is complaining and re-compile.

This error is caused by the Subversion "Resolved..." function.

Enjoy !