Source

upvideos / templates / index.html

<html lang="pt-br">
    <head>
        <link href="/static/ui/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
            
        <script type="text/javascript" src="/static/ui/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="/static/ui/js/jquery-ui-1.8.21.custom.min.js"></script>
        
        <script type="text/javascript" src="/static/js/jquery.snippet.min.js"></script>
        
        <!--
        HTML 5 Upload template based on :
        http://www.matlus.com/html5-file-upload-with-progress/
        -->
        
        <link href="/static/css/uploader.css" rel="stylesheet" type="text/css">
        <link href="/static/css/layout.css" rel="stylesheet" type="text/css">
            
        <link href="/static/css/jquery.snippet.min.css" rel="stylesheet" type="text/css">
        
        <script type="text/javascript">
        var bytesUploaded = 0;
        var bytesTotal = 0;
        var previousBytesLoaded = 0;
        var intervalTimer = 0;

        function fileSelected() {
          var file = document.getElementById('fileToUpload').files[0];
          if (file) {
            var fileSize = 0;
            if (file.size > 1024 * 1024)
              fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            else
              fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                  
            document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
            document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
            document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
          }
        }
        
        function uploadFile() {
            previousBytesLoaded = 0;
            document.getElementById('uploadResponse').style.display = 'none';
            document.getElementById('progressNumber').innerHTML = '';
            var progressBar = document.getElementById('progressBar');
            progressBar.style.display = 'block';
            progressBar.style.width = '0px';
            
            /* If you want to upload only a file along with arbitary data that
               is not in the form, use this */
            var fd = new FormData();
            fd.append("author", "Sergio Berlotto");
            fd.append("name", "Html 5 File API/FormData");
            fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
            if( document.getElementById('poster').files.length > 0 ){
                fd.append("poster", document.getElementById('poster').files[0]);
            }
            fd.append("size", document.getElementById('t_w').value + 'x' +
                      document.getElementById('t_h').value);
    
            /* If you want to simply post the entire form, use this */
            //var fd = document.getElementById('form1').getFormData();
            
            var xhr = new XMLHttpRequest();        
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "/upload");
            xhr.send(fd);
    
            intervalTimer = setInterval(updateTransferSpeed, 500);

        }
            
        function uploadProgress(evt) {
          if (evt.lengthComputable) {
            bytesUploaded = evt.loaded;
            bytesTotal = evt.total;
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            var bytesTransfered = '';
            if (bytesUploaded > 1024*1024)
              bytesTransfered = (Math.round(bytesUploaded * 100/(1024*1024))/100).toString() + 'MB';
            else if (bytesUploaded > 1024)
              bytesTransfered = (Math.round(bytesUploaded * 100/1024)/100).toString() + 'KB';
            else
              bytesTransfered = (Math.round(bytesUploaded * 100)/100).toString() + 'Bytes';
  
            document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
            document.getElementById('progressBar').style.width = (percentComplete * 3.55).toString() + 'px';
            document.getElementById('transferBytesInfo').innerHTML = bytesTransfered;
            if (percentComplete == 100) {
              document.getElementById('progressInfo').style.display = 'none';
              var uploadResponse = document.getElementById('uploadResponse');
              uploadResponse.innerHTML = '<span style="font-size: 18pt; font-weight: bold;">Please wait...</span>';
              uploadResponse.style.display = 'block';
            }
          }
          else {
            document.getElementById('progressBar').innerHTML = 'unable to compute';
          }  

        }
        
        function uploadComplete(evt) {
          clearInterval(intervalTimer);
            /* This event is raised when the server send back a response */
            //alert(evt.target.responseText);
            var uploadResponse = document.getElementById('uploadResponse');
            uploadResponse.innerHTML = evt.target.responseText;
            uploadResponse.style.display = 'block';
            refreshFileList();
        }
        
        function uploadFailed(evt) {
          clearInterval(intervalTimer);
          alert("Ocorreu um erro ao enviar o arquivo.");
        }
        
        function uploadCanceled(evt) {
          clearInterval(intervalTimer);
          alert("O envio foi cancelado pelo usuario ou o browser perdeu a conexao.");
        }
        
        function refreshFileList(){
            $('#listfiles').load('/lista-videos',function(){
                $('a#icon-code').click(function(){
                    //alert('clicado ' + $(this).attr('filename'));
                    $('#divSnippet').attr('title','Copie o codigo para seu site');
                    $('#divSnippet').load('/snippet/' + $(this).attr('filename'), function(){
                        $('#divSnippet').dialog({
                            modal: true,
                            width: 900,
                            height: 300
                        });
                        $("pre.htmlCode").snippet("html",{style:"dull",transparent:true,showNum:false});
                    });
                    return false;
                });
                $('a#icon-play').click(function(){
                    //alert('clicado ' + $(this).attr('filename'));
                    $('#divSnippet').attr('title','Veja o video');
                    $('#divSnippet').load('/play/' + $(this).attr('filename'));
                    $('#divSnippet').dialog({
                        modal: true,
                        width: 800,
                        height: 600
                    });
                    return false;
                });
                
                $('a#icon-poster').click(function(){
                    //alert('clicado ' + $(this).attr('filename'));
                    $('#divSnippet').attr('title','Poster do video');
                    $('#divSnippet').load('/poster/view/' + $(this).attr('filename'));
                    $('#divSnippet').dialog({
                        modal: true,
                        width: 640,
                        height: 480
                    });
                    return false;
                });
            });
        }

        
        </script>
    </head>
    <body>
        <div id="uploader-collumn">
            <form id="form1" enctype="multipart/form-data" method="post" action="/upload">
              <div class="row">
                <label for="fileToUpload">Selecione o arquivo de vídeo</label><br />
                <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
              </div>
              <div id="fileName"></div>
              <div id="fileSize"></div>
              <div id="fileType"></div>
              <div class="row">
                <label for="poster">Poster do vídeo:</label><br />
                <input type="file" id="poster" name="poster" value="" />
              </div>
              <div class="row">
                <label for="poster">Tamanho (W x H):</label><br />
                <input type="text" id="t_w" name="t_w" value="" size="3" />&nbsp;X&nbsp;
                <input type="text" id="t_h" name="t_h" value="" size="3" />
              </div>
              <div class="row">
                <input type="button" onclick="uploadFile()" value="Upload" />
              </div>
              <div id="progressBar" class="floatLeft"></div>
              <div id="progressNumber" class="floatRight">&nbsp;</div>
              <div class="clear"></div>
              <div>
                <div id="transferSpeedInfo" class="floatLeft" style="width: 80px;">&nbsp;</div>
                <div id="timeRemainingInfo" class="floatLeft" style="margin-left: 10px;">&nbsp;</div>
                <div id="transferBytesInfo" class="floatRight" style="text-align: right;">&nbsp;</div>
                <div class="clear"></div>
              </div>
            </form>
            
            <div id="uploadResponse"></div>
        </div>
        
        <div id="listfiles"></div>
        
        <script type="text/javascript">
            refreshFileList();
        </script>
    </body>
</html>