Blog

Using jQuery Upload Control and HTML5 Video Player to create Video Gallery

Marina Stoyanova / Thursday, September 19, 2013

The UI package contains different useful features. In this blog you will see how to create a simple video gallery using File Upload and Video Player Interaction controls similar to that one:

Getting started

This is an ASP.NET MVC project. To get our controls working we need to include Infragistics.Web.Mvc.dll library. To use Ignite UI in your View using Razor just add the following line:

Code Snippet
  1. @using Infragistics.Web.Mvc;

Generally,  when we create a MVC projects we don’t need to add jQuery scripts, because they are already included. So the only thing we need to add are the Infragistics scripts after them just like that:

Code Snippet
  1. <link type="text/css" href="@Url.Content("~/Content/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" />
  2. <link type="text/css" href="@Url.Content("~/Content/css/structure/infragistics.css")" rel="stylesheet" />
  3. <script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.core.js")">script>
  4. <script type="text/javascript" src="@Url.Content("~/Scripts/infragistics.lob.js")">script>

Don’t forget to append the Infragistics CSS folder and scripts to the appropriate folders in your project. These files you can find in the installation folder:

 

The File Upload

It is easy to use the Ignite UI File Upload, you just have to choose whether you want to upload one file at a time or multiple files and write the suitable code:

Single upload:

Code Snippet
  1. @(  Html.Infragistics().Upload()
  2. .ID("igUpload1").AddClientEvent("fileUploaded","UpHand")
  3. .AutoStartUpload(true)
  4. .ProgressUrl("/IGUploadStatusHandler.ashx")
  5. .Render()
  6. )

 

 

Multiple upload:

Code Snippet
  1. @(  Html.Infragistics().Upload()
  2. .ID("igUpload1").AddClientEvent("fileUploaded","UpHand")
  3. .Mode(UploadMode.Multiple)
  4. .MultipleFiles(true)
  5. .MaxUploadedFiles(5)
  6. .MaxSimultaneousFilesUploads(2)
  7. .AutoStartUpload(true)
  8. .ProgressUrl("/IGUploadStatusHandler.ashx")
  9. .Render()
  10. )

 

 

We are using MVC project, so it is necessary to ignore the URL of the HTTP handler in the Global.asax file. The following is the configuration for the back-end upload handler:

Code Snippet
  1. public static void RegisterRoutes(RouteCollection routes)
  2. {
  3.     routes.IgnoreRoute("IGUploadStatusHandler.ashx");
  4.  
  5.     . . .
  6. }

This is all you need to do when it comes to the client-side. Now let’s see how to configure the server-side: The HTTP Handler and Module. You are going to upload some videos, so you need a place to save them. Create a folder, for example Uploads and then register that folder in the Web.config file like that:

Code Snippet
  1. <appSettings>
  2.   <add key="fileUploadPath" value="~/Uploads" />
  3.   <add key="maxFileSizeLimit" value="100000000" />
  4.   . . .
  5. appSettings>

As you are uploading videos, make sure that you set the value of the maxFileSizeLimit to appropriate size. To register the modules and the handlers use the following code that take place again in the Web.config file:

Code Snippet
  1. <system.webServer>
  2.   <modules runAllManagedModulesForAllRequests="true">
  3.     <add name="IGUploadModule" type="Infragistics.Web.Mvc.UploadModule"
  4.                                preCondition="managedHandler" />
  5.   modules>
  6.   <handlers>
  7.     <add name="IGUploadStatusHandler" path="IGUploadStatusHandler.ashx" verb="*"
  8.          type="Infragistics.Web.Mvc.UploadStatusHandler" preCondition="integratedMode" />
  9.   handlers>
  10.   <validation validateIntegratedModeConfiguration="false" />
  11. system.webServer>

And that is it. Now you have a functional and attractive file upload for your gallery. You can find more information about the features of that control and some samples here.

 

The Video Player

So you want to play the uploaded videos with Ignite UI Video player. To set up the player in Razor ASP.NET MVC View you have to use the following lines:

Code Snippet
  1. @(Html.Infragistics().VideoPlayer()
  2. .Height("200px")
  3. .Width("300px")
  4. .Title("Video Sample")
  5. .Render()
  6. )

Of course you need to set the video source. In ASP.NET MVC the Source must be set before Render is called. As you want all of your videos to be played with that player you need to go through all of the files in the uploaded folder and assign them the player. In order to do that you can make a foreach loop like this one:

Code Snippet
  1. @foreach (var item in (ViewData["videoSources"] as string[]))
  2. {
  3.     <span class="videos">
  4.  
  5.      @(Html.Infragistics().VideoPlayer()
  6.      .Height("200px")
  7.      .Width("300px")
  8.      .Title("Video Sample")
  9.      .Sources(new List<String> { Url.Content(item) })
  10.      .Render())
  11.  
  12.     span>
  13. }

 

For convenience that code is in a new View called Video. It is a new View so don’t forget to include the Infragistics.Web.Mvc at the top of the page. In the HomeController.cs you need to set the video source:

Code Snippet
  1. public ActionResult Index()
  2. {
  3.     /* Getting the path of the uploaded video files. */
  4.  
  5.     string[] paths = System.IO.Directory.GetFiles(Server.MapPath("~/Uploads"));
  6.     for(int i = 0; i <  paths.length; i="" span="">
  7.     {
  8.  
  9.         paths[i] = "~/Uploads/" + System.IO.Path.GetFileName(paths[i]);
  10.         
  11.     }
  12.    
  13.     ViewData["videoSources"] = paths;
  14.     
  15.     return View();
  16. }

So this is how to play your videos with Ignite UI Video Player. More information about the features as well as some samples of the player you can find here.

The Gallery

Simple or not one gallery can be called good only if it works properly. Nobody likes if the whole page reloads every time a video is uploaded, that is why you want only the newly uploaded video to appear. In order to do so, you can use the fileUploaded event (more about the file upload events you can find in the documentation about that control) and some jQuery to do the magic for you.

Code Snippet
  1. <script >
  3.     function UpHand(evt,ui) {
  4.         
  5.         $.ajax({
  6.             url: "@Url.Action("Video","Home")",
  7.             data: {clip: ui.filePath}
  8.         }).done(function (data) {
  9.             if ($("#Video").children().length > 0) {
  10.                 $("#Video").append(data.replace(/VideoPlayer1/g, ("VideoPlayer" + $("#Video").children().length +1)));
  11.             }
  12.             else{
  13.                 $("#Video").append(data);
  14.             }
  15.         });
  16.     };
  17.          
  18.  
  19. script>

 

This code helps you to force only the newly uploaded videos to appear. When we upload videos they may be assign with the same id, then when we try to upload a new video it will appear in the place of the previous one. Here comes the following line:

Code Snippet
  1. if ($("#Video").children().length > 0) {
  2.     $("#Video").append(data.replace(/VideoPlayer1/g, ("VideoPlayer" + $("#Video").children().length +1)));
  3. }
  4. else{
  5.     $("#Video").append(data);
  6. }

If there are Videos with the same id we change it, otherwise we just append it to the previous one.

There is one last thing that have to be done before our gallery becomes usable. You have to set the controller for the Video View. The following code take place in the HomeController.cs file.

Code Snippet
  1. public PartialViewResult Video(string clip)
  2. {
  3.     string[] paths = new string[1] ;
  4.     if (System.IO.File.Exists(Server.MapPath("~/Uploads/") + clip))
  5.     {
  6.         paths[0] = "~/Uploads/" + clip;
  7.     }
  8.  
  9.     ViewData["videoSources"] = paths;
  10.    return PartialView();
  11. }

So using the above mentioned source you will be able to create a simple video gallery like that:

You can download the sample code from here.

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!