{"id":550,"date":"2013-09-19T17:39:00","date_gmt":"2013-09-19T17:39:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=550"},"modified":"2025-03-05T14:54:58","modified_gmt":"2025-03-05T14:54:58","slug":"video-gallery","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/video-gallery","title":{"rendered":"Create Video Gallery: jQuery Upload Control and HTML5 Video Player"},"content":{"rendered":"\n
\"upload<\/figure>\n\n\n\n

Getting started<\/h2>\n\n\n\n

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:<\/p>\n\n\n\n

@using Infragistics.Web.Mvc;<\/pre>\n\n\n\n
Generally,  when we create a MVC projects we don\u2019t 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:<\/p>\n\n\n\n
<link type=\"text\/css\" href=\"@Url.Content(\"~\/Content\/css\/themes\/infragistics\/infragistics.theme.css\")\" rel=\"stylesheet\" \/>\n<link type=\"text\/css\" href=\"@Url.Content(\"~\/Content\/css\/structure\/infragistics.css\")\" rel=\"stylesheet\" \/>\n<script type=\"text\/javascript\" src=\"@Url.Content(\"~\/Scripts\/infragistics.core.js\")\"><\/script>\n<script type=\"text\/javascript\" src=\"@Url.Content(\"~\/Scripts\/infragistics.lob.js\")\"><\/script><\/pre>\n\n\n\n
<\/a>Don\u2019t 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:<\/p>\n\n\n\n
\"Don\u2019t<\/figure>\n\n\n\n
 <\/p>\n\n\n\n
The File Upload<\/h2>\n\n\n\n
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:<\/p>\n\n\n\n
Single upload:<\/strong><\/p>\n\n\n\n
@(  Html.Infragistics().Upload()\n.ID(\"igUpload1\").AddClientEvent(\"fileUploaded\",\"UpHand\")\n.AutoStartUpload(true)\n.ProgressUrl(\"\/IGUploadStatusHandler.ashx\")\n.Render()\n)<\/pre>\n\n\n\n
\"Single<\/figure>\n\n\n\n
Multiple upload:<\/strong><\/p>\n\n\n\n
@(  Html.Infragistics().Upload()\n.ID(\"igUpload1\").AddClientEvent(\"fileUploaded\",\"UpHand\")\n.Mode(UploadMode.Multiple)\n.MultipleFiles(true)\n.MaxUploadedFiles(5)\n.MaxSimultaneousFilesUploads(2)\n.AutoStartUpload(true)\n.ProgressUrl(\"\/IGUploadStatusHandler.ashx\")\n.Render()\n)<\/pre>\n\n\n\n
\"Multiple<\/figure>\n\n\n\n
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:<\/p>\n\n\n\n
public static void RegisterRoutes(RouteCollection routes)\n{\n    routes.IgnoreRoute(\"IGUploadStatusHandler.ashx\");\n \n    . . .\n}<\/pre>\n\n\n\n
This is all you need to do when it comes to the client-side. Now let\u2019s 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:<\/p>\n\n\n\n
<appSettings>\n  <add key=\"fileUploadPath\" value=\"~\/Uploads\" \/>\n  <add key=\"maxFileSizeLimit\" value=\"100000000\" \/>\n  . . .\n<\/appSettings><\/pre>\n\n\n\n
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:<\/p>\n\n\n\n
<system.webServer>\n  <modules runAllManagedModulesForAllRequests=\"true\">\n    <add name=\"IGUploadModule\" type=\"Infragistics.Web.Mvc.UploadModule\" preCondition=\"managedHandler\" \/>\n  <\/modules>\n  <handlers>\n    <add name=\"IGUploadStatusHandler\" path=\"IGUploadStatusHandler.ashx\" verb=\"*\" type=\"Infragistics.Web.Mvc.UploadStatusHandler\" preCondition=\"integratedMode\" \/>\n  <\/handlers>\n  <validation validateIntegratedModeConfiguration=\"false\" \/>\n<\/system.webServer><\/pre>\n\n\n\n
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<\/a>.<\/p>\n\n\n\n
The Video Player<\/h2>\n\n\n\n
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:<\/p>\n\n\n\n
@(Html.Infragistics().VideoPlayer()\n.Height(\"200px\")\n.Width(\"300px\")\n.Title(\"Video Sample\")\n.Render()\n)<\/pre>\n\n\n\n
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:<\/p>\n\n\n\n
@foreach (var item in (ViewData[\"videoSources\"] as string[]))\n{\n    <span class=\"videos\">\n \n     @(Html.Infragistics().VideoPlayer()\n     .Height(\"200px\")\n     .Width(\"300px\")\n     .Title(\"Video Sample\")\n     .Sources(new List<String> { Url.Content(item) })\n     .Render())\n \n    <\/span>\n}<\/pre>\n\n\n\n
 <\/p>\n\n\n\n
\"assign<\/figure>\n\n\n\n
For convenience that code is in a new View called Video. It is a new View so don\u2019t forget to include the Infragistics.Web.Mvc at the top of the page. In the HomeController.cs you need to set the video source:<\/p>\n\n\n\n
public ActionResult Index()\n{\n    \/* Getting the path of the uploaded video files. *\/\n \n    string[] paths = System.IO.Directory.GetFiles(Server.MapPath(\"~\/Uploads\"));\n    for(int i = 0; i <  paths.length; i=\"\" span=\"\">\n    {\n \n        paths[i] = \"~\/Uploads\/\" + System.IO.Path.GetFileName(paths[i]);\n        \n    }\n   \n    ViewData[\"videoSources\"] = paths;\n    \n    return View();\n}<\/pre>\n\n\n\n
<\/a>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<\/a>.<\/p>\n\n\n\n
The Gallery<\/h2>\n\n\n\n
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<\/a>) and some jQuery to do the magic for you.<\/p>\n\n\n\n
<script>\n    function UpHand(evt,ui) {    \n        $.ajax({\n            url: \"@Url.Action(\"Video\",\"Home\")\",\n            data: {clip: ui.filePath}\n        }).done(function (data) {\n            if ($(\"#Video\").children().length > 0) {\n                $(\"#Video\").append(data.replace(\/VideoPlayer1\/g, (\"VideoPlayer\" + $(\"#Video\").children().length +1)));\n            }\n            else{\n                $(\"#Video\").append(data);\n            }\n        });\n    };      \n<\/script><\/pre>\n\n\n\n
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:<\/p>\n\n\n\n
if ($(\"#Video\").children().length > 0) {\n    $(\"#Video\").append(data.replace(\/VideoPlayer1\/g, (\"VideoPlayer\" + $(\"#Video\").children().length +1)));\n}\nelse{\n    $(\"#Video\").append(data);\n}<\/pre>\n\n\n\n
If there are Videos with the same id we change it, otherwise we just append it to the previous one.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
public PartialViewResult Video(string clip)\n{\n    string[] paths = new string[1] ;\n    if (System.IO.File.Exists(Server.MapPath(\"~\/Uploads\/\") + clip))\n    {\n        paths[0] = \"~\/Uploads\/\" + clip;\n    }\n \n    ViewData[\"videoSources\"] = paths;\n   return PartialView();\n}<\/pre>\n\n\n\n
So using the above mentioned source you will be able to create a simple video gallery like that:<\/p>\n\n\n\n
\"using<\/figure>\n\n\n\n
You can download the sample code from here.<\/a><\/p>\n\n\n\n
You can follow us on Twitter @Infragistics<\/a> and stay in touch on Facebook<\/a>, Google+<\/a> and LinkedIn<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"
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:<\/p>\n","protected":false},"author":149,"featured_media":2370,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,16],"tags":[],"class_list":["post-550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-jquery"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/149"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=550"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/550\/revisions"}],"predecessor-version":[{"id":2182,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/550\/revisions\/2182"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2370"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}