Asp.Net Development Professionals Implementing Asynchronous File Upload Using KendoUI

It seems asp.net is becoming staple for developers. However, MVC has no scope for file uploading, this is why asp.net development team is sharing this tutorial to let you learn how to implement asynchronous file upload in asp.net mvc. Here the experts are using KendoUI file upload control to get the project done. To know the trick, keep reading this article.

Now a day’s most of web application has to implement file upload feature. In MVC there is no such control for file uploading. We only have to implement input with type=”file”. But in KendoUI, It provides helper class to generate file upload control which is very easier to implement. So today we will implement File Upload Control which is the component of KendoUI controls which has additional features like supporting multiple files to upload, progress bar, success/fail callback and most important is to support asynchronous file uploading. Asynchronously means that the script will send a request to the server and continue its execution without waiting for the reply.  As soon as reply is received a browser event is fired, which in turn allows the script to execute associated actions.

First of all we need to reference of following files:

  • kendo.core.min.js
  • kendo.upload.min.js
  • kendo.common.min.css
  • kendo.default.min.css
  • jquery-1.10.2.min.js

==> Now we will implement file upload control step by step from the following screen-shots:

1. Go to file menu and click on New Project which will show following screen now set name of the project and click on OK button.

asp.net development

2. After clicking on OK button it will show you following screen to select template of the project so now we will select MVC and click on OK.

asp.net development

3. After clicking on OK button we can see project structure like this :

asp.net development

4. Now we will install Telerik KendoUI package using Package Manager like this

asp.net development

5. Then give the reference of Kendo.Mvc which is downloaded from http://www.telerik.com/aspnet-mvc website.

asp.net development

6. Now Add new view under Views -> Home-> FileUpload.cshtml

asp.net development

7. So new view will have code like this :

@{

    ViewBag.Title = “FileUpload”;

}

<h2>FileUpload</h2>

8. Now Add reference of Kendo.Mvc.UI namespace as well as reference of  Scripts files and Style sheet files which mentioned in the beginning for KendoUI file upload control in this view :

@using Kendo.Mvc.UI

<script src=”@Url.Content(“~/Scripts/jquery-1.10.2.min.js”)“></script>

<link href=”@Url.Content(“~/styles/kendo.common.min.css”) rel=”stylesheet” />

<link href=”@Url.Content(“~/styles/kendo.default.min.css”) rel=”stylesheet” />

<script src=”@Url.Content(“~/Scripts/kendo.core.min.js”)“></script>

<script src=”@Url.Content(“~/Scripts/kendo.upload.min.js”)“></script>

9. Now Add KendoUI file upload control:

@(Html.Kendo()

    .Upload()

    .Name(“files”)

    .Async(a => a

        .Save(“Save”“Home”)

        .AutoUpload(false))

)

10. After adding this all things file upload view will be looked like this:

@using Kendo.Mvc.UI

@{

    ViewBag.Title = “FileUpload”;

}

<h2>FileUpload</h2>

<script src=”@Url.Content(“~/Scripts/jquery-1.10.2.min.js”)“></script>

<link href=”@Url.Content(“~/styles/kendo.common.min.css”) rel=”stylesheet” />

<link href=”@Url.Content(“~/styles/kendo.default.min.css”) rel=”stylesheet” />

<script src=”@Url.Content(“~/Scripts/kendo.core.min.js”)“></script>

<script src=”@Url.Content(“~/Scripts/kendo.upload.min.js”)“></script>

@(Html.Kendo()

    .Upload()

    .Name(“files”)

    .Async(a => a

        .Save(“Save”“Home”)

        .AutoUpload(false))

)

11. Now we will create Save action method in Home Controller to save the file on given path of File system and File-upload action method to open the view of File Upload control.

ppublic ActionResult Save(IEnumerable<HttpPostedFileBase> files)

{

string errMsg = string.Empty;

if (files != null)

{

List<string> lstFiles = Directory.GetFiles(“C:\\).ToList();

    foreach (HttpPostedFileBase file in files)

    {

     if (lstFiles.Any(a => a.Contains(file.FileName)))

      {

       errMsg += file.FileName + ” file is already uploaded”;

      }

      else

      {

       file.SaveAs(“C:\\ + file.FileName);

      }

    }

  }

return Content(errMsg); //return empty string to show the success…OR pass any string to show unsuccessful file upload

}

public ActionResult FileUpload()

        {

            return View();

        }

12. Now change the content of shared view _Layout.cshtml and set basic elements like this :

<!DOCTYPE html>

<html>

<head>

    <meta charset=”utf-8″ />

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>@ViewBag.Title – My ASP.NET Application</title>

    @Styles.Render(“~/Content/css”)

</head>

<body>

    <div class=”container body-content”>

        @RenderBody()

    </div>

</body>

</html>

13. Now we are all set to upload file, just run the project , it will show following output when you go to File-upload view :

asp.net developmentasp.net development

14. You can see this files here :

asp.net development

You now know how to perform file uploading in asp.net mvc. To feedback to asp.net development team of Aegis, you can simply drop your message to comment box. Do visit this space every time for related articles.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s