<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upload.aspx.cs" Inherits="Upload" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
    
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/slick.css">
     <link rel="stylesheet" href="css/datepicker.css">
     <link rel="stylesheet" href="css/fileinput.css">
    <link href="css/fileinput.min.css" rel="stylesheet">

    <link rel="stylesheet" href="js/rs-plugin/css/settings.css">
    <link href="css/bootstrap-select.css" rel="stylesheet" />

    <script type="text/javascript" src="js/modernizr.custom.32033.js"></script>
    
  

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    
    <form id="form1" runat="server">
    
     

    <center>
        <label class="control-label">Select File</label>
       <input type="file" class="filestyle" data-input="false">

      <div id="box" style="width:240px; height:250px">Drag & Drop files from your machine on this box.</div>
      <br />
      <input id="upload" class="alert" type="button" value="Upload Selected Files" />
    </center>
    </form>

    <div id="modalUpload" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
       Cargando video...
    </div>
  </div>
</div>

   <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/placeholdem.min.js"></script>
    <script src="js/rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script src="js/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
    <script src="js/waypoints.min.js"></script>
    <script src="js/scripts.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/bootstrap-select.js"></script>

     <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.validate.min.js"></script>

    <script type="text/javascript"></script>
    <script src="FlowPlayer/flowplayer-3.2.12.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/bootstrap-filestyle.js"> </script>
    <script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
    <script type="text/javascript">
        var selectedFiles;
 
        $(document).ready(function () {
            var box;
            box = document.getElementById("box");
            box.addEventListener("dragenter", OnDragEnter, false);
            box.addEventListener("dragover", OnDragOver, false);
            box.addEventListener("drop", OnDrop, false);
         
        });

        function OnDragEnter(e) {
            e.stopPropagation();
            e.preventDefault();
        }

        function OnDragOver(e) {
            e.stopPropagation();
            e.preventDefault();
        }

        function OnDrop(e) {
            e.stopPropagation();
            e.preventDefault();
            selectedFiles = e.dataTransfer.files;
            $("#box").text(selectedFiles.length + " file(s) selected for uploading!");
        }


        $("#upload").click(function () {
            openModalLoad();
            var data = new FormData();
            for (var i = 0; i < selectedFiles.length; i++) {
                data.append(selectedFiles[i].name, selectedFiles[i]);
            }
            $.ajax({
                type: "POST",
                url: "AjaxVideoUploader.ashx",
                contentType: false,
                processData: false,
                data: data,
                success: function (result) {
                    closeModalLoad();
                    alert('Video cargado correctamente');
                },
                error: function () {

                    alert("There was error uploading files!");
                }
            });
        });

        function openModalLoad() {
            $('#modalUpload').modal({ show: true });
        }
        function closeModalLoad() {
            $('#modalUpload').modal('hide');
        }
    </script>
   
</body>
</html>
