Dynamic video gallery +flowplayer + Bootstrap modal + Asp.net

We will display a dynamic video gallery from database to datalist and on clicking a video, a bootstrap modal (pop up window) will display the video, also we will add a jquery to stop video on close.

SCRIPT (Jquery+Flowplayer+Bootstrap)
--------
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

      <script src="//releases.flowplayer.org/6.0.3/flowplayer.min.js"></script>

    <link rel="stylesheet" href="//releases.flowplayer.org/6.0.3/skin/minimalist.css">

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  //Stop video

   <script>
 
        $('body').on('hidden.bs.modal', '.modal', function () {
            $('video').trigger('pause');
       
        });
    </script>


(also u can try to stop video option 2:  

  <script>

        $('body').on('hidden.bs.modal', '.modal', function () {
           jQuery('.modalid video').attr("src", jQuery(".modalid video").attr("src"));
     
        });
    </script>

)

HTML (Datalist with flowplayer and bootstrap modal)
---------

<asp:DataList ID="test_datalist" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" CellPadding="10" RepeatLayout="Table" HeaderStyle-VerticalAlign="Top">

                            <ItemStyle Height="100%" HorizontalAlign="Center" />

                            <ItemTemplate>

                           <div class="test_first_div" style="padding-left: 2px;">

                         <div class="videobox" style="margin: 0 auto; width: 99%;">

                       <div style="float: left;width:100%;">

                       <div style="text-align: center; width: 100%; height: 40px; padding-top: 5px;">

                                                <span></span>

 <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# Eval("Name") %>' CssClass="linkbtn2"></asp:LinkButton>

                          </div>

                           

                                           

                                        

      <a class="btn btn-info btn-lg" data-toggle="modal" data-target='<%# "#" + Eval("id") %>' >

        <img src="Images/Testimonies_poster.png"   style="width:100%"/>

    </a>

                                            <!-- Modal -->

  <div id='<%# Eval("id") %>' class="modal fade modalid" role="dialog">

                                                <div class="modal-dialog">

                                                    <!-- Modal content-->

                                             <div class="modal-content">

                                      <div class="modal-header">

                                   <button type="button" class="close" data-dismiss="modal">&times;</button>

                                                            <h4 class="modal-title">Modal Header</h4>

                                                        </div>

                                                        <div class="modal-body" style="height:400px;">

                                                            <div class="videoplayer" style="">

 <div class="flowplayer" data-ratio="0.4167" data-poster="Images/Testimonies_poster.png">

                         <video poster=" width="300" height="400">

                                                      <source src='<%# Eval("location") %>' type='video/mp4' />

                                                       <source src='<%# Eval("location") %>' type='video/webm' />

                                                        <source src='<%# Eval("location") %>' type='video/ogg' />

                                                          <source src='<%# Eval("location") %>' type='video/flv' />

                                                                    </video>

                                                                </div>

                                                            </div>

                                                        </div>

                                                       

                                                    </div>

                                                </div>

                                            </div>

                                           

          

                                            <div style="text-align: left; width: 100%; height: 40px;">

                                                <span>Category :</span>

            <asp:Label ID="LinkButton3" runat="server" Text='<%# Eval("category") %>'></asp:Label>

                                                <br />

                                                <span>Posted on :</span>

  <asp:Label ID="LinkButton2" runat="server" Text='<%# Eval("Posted_date") %>'></asp:Label>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </ItemTemplate>

                        </asp:DataList>

You can now code behind to get data 

like Id,Name,videolocation,posted date etc .. and bind to datalist.

 test_datalist.DataSource = idr;

 test_datalist.DataBind();

Call a javascript after update panel in asp.net

  <script>
        ///<summary>
        ///  This will fire on initial page load,
        ///  and all subsequent partial page updates made
        ///  by any update panel on the page
        ///</summary>
        function pageLoad() {


            $(document).ready(function () {
                $(function myFunction() {



                    //then load the JavaScript file
                    $.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
                    $.getScript('http://lab.iamrohit.in/js/location.js');


                });
            });


        }
</script>

Http 500 error on file upload

Problem- On local machine file upload works but on server it is giving me http 500 error.

Solution:- Check folder permissions and make it write ,read,delete for anonymous users on hosting server.

Also in coding use input stream after upload.

using System.IO;

   file = context.Request.Files[0];

                string filename = file.FileName;

                //Upload video code

                string a = filename.Trim();

          

  file.SaveAs(HttpContext.Current.Server.MapPath("~/videos/") + a);

                Stream streamfile = file.InputStream;

Grab a image from a video with ffmpeg

Download ffmpeg.exe and paste it in ffmpeg folder

And

Write the code in

Codebehind
-----------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Diagnostics;

public partial class Videoframe : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

       //Put the ffmpeg.exe into the source folder.

//Write the following code to grab thumbnail from the wmv video file into jpg file.

//Path for Video file

        string InputFile = Server.MapPath ("~\\videos\\TestimonyDeafMinistry.mp4");

//Path for Image (jpg) file

        string ThumbnailsPath = Server.MapPath("~\\videos\\testimage.jpg");

System.Diagnostics.Process proc = new System.Diagnostics.Process();

proc.EnableRaisingEvents = false;

//Select ffmpeg.exe

proc.StartInfo.FileName = Page.MapPath("~\\ffmpeg\\ffmpeg.exe");

//Pass the argument

// You can see the text in Red color below:

// First one is the frame and second is the size of the image

proc.StartInfo.Arguments = " -i \"" + InputFile + "\"  -an -ss 00:00:03 -s 400*300  -vframes 1 -f image2 -vcodec mjpeg \"" + ThumbnailsPath + "\"";

//Start the Process

proc.Start();

    }
}

Simple and easy file upload with jquery in asp.net forms(with progress bar)

 normal_fileupload.aspx
------------------------------------------
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        body {
            padding: 30px;
        }

        form {
            display: block;
            margin: 20px auto;
            background: #eee;
            border-radius: 10px;
            padding: 15px;
        }

        .progress {
            position: relative;
            width: 400px;
            border: 1px solid #ddd;
            padding: 1px;
            border-radius: 3px;
        }

        .bar {
            background-color: #3599fa;
            width: 0%;
            height: 20px;
            border-radius: 3px;
        }

        .percent {
            position: absolute;
            display: inline-block;
            top: 0px;
            left: 48%;
            ;
            font-family: 'Open Sans';
        }
    </style>




<body>

    <form id="Form1" action="Upload.ashx" method="post" enctype="multipart/form-data" runat="server">
        <input id="test_title" type="text" placeholder="Title" />
          <select id="category" class="droplist_style4">
            <option id="C" value="C">-Select-</option>
            <option id="M" value="Ministry Testimony">Ministry Testimony</option>
            <option id="P" value="Personal Testimony">Personal Testimony</option>
            <option id="F" value="Family Testimony">Family Testimony</option>
            <option id="O" value="Others Testimony">Others Testimony</option>
            <option id="W" value="Worship video Song">Worship video Song</option>
            <option id="ME" value="Church Message">Church Message</option>
        </select>

        <input type="file" name="myfile[]" multiple=""><br>
        <input type="submit" value="Upload File to Server">
        <asp:Label ID="user_lbl" runat="server" Text="akash"></asp:Label>
     

    </form>
    <div class="progress">
        <div class="bar" style="width: 100%;"></div>
        <div class="percent">0%</div>
    </div>

    <div id="status"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
        function validate(formData, jqForm, options) {
       
            if ($("#test_title").val() == "") {
                alert('Please enter a value for title');
                return false;
            }
            if ($("#category").val() == "C") {
                alert('Please select Category');
                return false;
            }

            for (var i = 0; i < formData.length; i++) {
                if (!formData[i].value) {
                    alert('Please select file');
                    return false;

                }
                else {

                }
            }
            //alert('Both fields contain values.');
        }




        (function () {

            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');
            $('.bar').width(0);



            $('form').ajaxForm({
                requiredFields: ["title_text"],
                beforeSubmit: validate,
                contentType: "application/json; charset=utf-8",
                data: { 'Id': '10000', 'title': $("#title_text").val() },

                dataType: "json",
                beforeSend: function (data) {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);

                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    //console.log(percentVal, position, total);
                },
                success: function (data) {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    $("#status").html(data);
                    alert(data);
                },
                complete: function (xhr) {
                    status.html(xhr.responseText);
                },
                beforeSerialize: function (form, options) {
                    options.data = {
                        user: $("#<%=user_lbl.ClientID%>").text(),
                    video_name: $("#test_title").val(),
                    category: $("#category").val(),
                    B: true
                };
            }
        });

    })();


    </script>
</body>

Upload.ashx
----------------
<%@ WebHandler Language="C#" Class="Upload" %>

using System;
using System.Web;
using System.IO;

public class Upload2 : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
     



        HttpPostedFile file = null;

        if (context.Request.Files.Count > 0)
        {
            file = context.Request.Files[0];
            file.SaveAs(HttpContext.Current.Server.MapPath("~/videos/") + file.FileName);
            Stream streamfile = file.InputStream;

            string id = context.Request["Id"];
            string user = context.Request["user"];
         
            string video_name = context.Request["video_name"];
            string category = context.Request["category"];
            //string id = "akash";

            string extension;
            string filename = file.FileName;
            extension = Path.GetExtension(filename);


            context.Response.Write( " File name : " + filename + "</br>" + " Category : " + category + "</br>" + " video name:" + video_name + "</br>" + " user:" + user);
        }
           
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

web.config
--------------

 <system.web>

    <httpRuntime maxRequestLength="1048576" executionTimeout="99999" />
    <compilation targetFramework="4.0" defaultLanguage="c#" />
    <customErrors mode="Off" />
    <sessionState timeout="120" />

  </system.web>

<location path="Upload.ashx" >
    <system.web>
      <authorization>
        <allow users="*" />
      </authorization>
   
    </system.web>
  </location>
 <appSettings>
    <add key="FolderPath" value="videos" />
  </appSettings>
  <system.webServer>
    <httpErrors existingResponse="PassThrough" />
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="1073741824" />
      </requestFiltering>
    </security>
    <validation validateIntegratedModeConfiguration="false" />
 
  </system.webServer>

How to upload video or images with progress bar in asp.net (Using Uploadify)

Dowload uploadify

http://www.uploadify.com/download/

SCRIPT
------------

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <link href="css/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.uploadify-3.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.uploadify-3.1.js" type="text/javascript"></script>


Get input and dropdownlist values, before that validate the controls and check file types

Validation and click action to upload
-------------------------------------------------------

<script type="text/javascript">
        $(document).ready(

          function () {
              $("#test_upload_btn").click(function () {


                  if ($("#test_title").val() != "" && $("#category").val() != "C") {




                      $(function () {

                          $("#test_file_upload").uploadify('upload');

                      });
                  }

                  if ($("#test_title").val() == "") {


                      $("#test_title").css('border', '1px solid red');

                  }
                  else {
                      $("#test_title").css('border', '1px solid blue');
                  }
                  if ($("#category").val() == "C") {


                      $("#category").css('border', '1px solid red');

                  }
                  else {
                      $("#category").css('border', '1px solid blue');
                  }



              });

          });



        $(document).ready(

                function () {

                    $(".test_file_upload").uploadify(
         {
             'swf': 'js/uploadify.swf',
             'uploader': 'Upload.ashx',
             'cancelImg': 'js/uploadify-cancel.png',

             'auto': false,
             'multi': false,
             'buttonText': 'Select File',
             'fileDesc': 'Image Files',
             'fileExt': '*.jpg;*.png;*.gif;*.bmp;*.jpeg',
             'queueSizeLimit': 10,
             'sizeLimit': 4000000,
             'folder': 'videos',
             'method': 'post',
             'onUploadStart': function (file) {

                 var user = $("#<%=user_lbl.ClientID%>").text();
                 var video_name = $("#test_title").val();
                 var category = $("#category").val();


                 var formData = { 'user_name': user, 'video_name': video_name, 'category': category }

                 $("#test_file_upload").uploadify("settings", "formData", formData);
             },
             'onUploadSuccess': function (file, data, response) {
                 alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
             },
             'onUploadComplete': function () { refreshRightSide() }
         });

                });
    </script>


HTML
-----------
    <input id="test_title" type="text" placeholder="Please enter title" class="textbox4" />
                               <select id="category">
                                        <option id="C" value="C">-Select-</option>
                                        <option id="M" value="Ministry ">Ministry Testimony</option>
                                        <option id="P" value="Personal ">Personal Testimony</option>
                               
                                    </select>
 <input type="file" name="file_upload" id="test_file_upload" class="test_file_upload" />

  <input id="test_upload_btn" type="button" value="Upload and save" class="button3" />
 <span style="display: none;">
   <asp:Label ID="user_lbl" runat="server" Text="akash"></asp:Label>
</span>

upload.ashx
-----------------------

<%@ WebHandler Language="C#" Class="Upload" %>

using System;
using System.Web;
using System.IO;

using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public class Upload : IHttpHandler {
 
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        try
        {
            HttpPostedFile postedFile = context.Request.Files["Filedata"];

            string savepath = "";
            string tempPath = "";
            tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"];
            savepath = context.Server.MapPath(tempPath);
            string filename = postedFile.FileName;
            if (!Directory.Exists(savepath))
                Directory.CreateDirectory(savepath);

            postedFile.SaveAs(savepath + @"\" + filename);
            context.Response.Write(tempPath + "/" + filename);
            context.Response.StatusCode = 200;



            //Upload video code
            string loc = "/videos/" + filename;
            string user = context.Request["user_name"];
            string video_name = context.Request["video_name"];
            //context.Request["user"];
            string file_size = postedFile.ContentLength.ToString();
            double m = Convert.ToDouble(file_size);
            double result = m / 1024;
            string catagory = context.Request["category"];
            file_size = Convert.ToString(result);  //Result in kilobytes
            FileInfo fi = new FileInfo(postedFile.FileName);
            string video_extension_type = fi.Extension;



            //Upload video link to db
            SqlConnection sqlconn = new SqlConnection("Data Source=akash\\SQLEXPRESS;Initial Catalog=prayermeetings;Integrated Security=True");
            SqlCommand sqlcomm = new SqlCommand("video_upload", sqlconn);
            sqlcomm.CommandType = CommandType.StoredProcedure;
            sqlcomm.Parameters.Add("@video_name", SqlDbType.VarChar, 200).Value = video_name;
            sqlcomm.Parameters.Add("@video_location", SqlDbType.VarChar, 500).Value = loc;
            sqlcomm.Parameters.Add("@username", SqlDbType.VarChar, 50).Value = user;
            sqlcomm.Parameters.Add("@category", SqlDbType.VarChar, 50).Value = catagory;
            sqlcomm.Parameters.Add("@video_size", SqlDbType.VarChar, 10).Value = file_size;
            sqlcomm.Parameters.Add("@video_extension_type", SqlDbType.VarChar, 20).Value = video_extension_type;
            sqlconn.Open();
            sqlcomm.ExecuteNonQuery();
            sqlconn.Close();




            context.Response.Write("1");

         
        }
        catch (Exception ex)
        {
            context.Response.Write("Error: " + ex.Message);
            context.Response.Write("0");
        }
    }







 
    public bool IsReusable {
        get {
            return false;
        }
    }
}


Web.config(Size in bytes)
--------------------
 <system.webServer>
   <security>
      <requestFiltering>
         <requestLimits maxAllowedContentLength="1073741824" />
      </requestFiltering>
   </security>
 </system.webServer>

Selected checkbox in gridview is not working on server but working on local machine

Problem:- when i click delete button for selected checkbox in gridview it is not working on server but working on local machine.


Solution:- In web hosting check permissions for folders,if your gridview contains images.Check mark delete permission in hosting for anonymous.


For deleting images from server folder you need to put permissions to delete.