Total Pageviews

Tuesday 14 July 2015

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>

No comments:

Post a Comment