clipbucket/upload/styles/cb_2014/layout/upload.html

{if $msg}
<div class="alert alert-info">
    {$msg}
</div>
{/if}
<div id="uploadMessage" class=""></div>
<div class="container uploadVideos">

    <div class="cb-box" id="mainUploadContainer">
        <div class="pad-bottom video-info-container">
            <ul class="nav nav-tabs">
                {assign var=opt_list value=$Upload->load_upload_options()} 
                {$counter = 1}
                {foreach from=$opt_list item=opt key=divid}
                    {if $counter == 1}{$class = "active"}{else}{$class = ""}{/if}
                    {* Checking weather to show uploadin option to user or not *}
                    {assign var=uploadOptId value=$opt.load_func}
                    {if $Cbucket->configs.$uploadOptId=='yes'}
                        {assign var='no_upload' value='no'}
                        <li class="{$class}"><a href="#{$divid}" data-toggle="tab">{$opt.title}</a></li>
                    {/if}
                    {$counter = $counter + 1}
                {/foreach}
            </ul>
            <div class="tab-content uploadFormDiv">
                {$counter = 1}
                {foreach from=$opt_list item=opt key=divid}     
                    {* Checking weather to show uploadin option to user or not *}
                    {assign var=uploadOptId value=$opt.load_func}
                    {if $Cbucket->configs.$uploadOptId=='yes'} 
                    {if $counter == 1}{$class = "active"}{else}{$class = ""}{/if}
                    <div class="tab-pane fade in clearfix {$class}" id="{$divid}">
                        {if $counter == 1}
                            <div class="cb-box pad-bottom-sm progress-container hidden">    
                                <div class="row">
                                    <div class="col-md-2" id="uploadedFilesInfo">
                                        <p>Uploaded 0 of 0</p>
                                    </div>
                                    <div class="col-md-10">
                                        <div class="progress">
                                            <div id="overallProgress" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                                <span class="sr-only">40% Complete (success)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {/if}
                        {load_form name=$opt.load_func button_class='cb_button_2' class='upload_form'} 
                    </div>
                    {/if}
                    {$counter = $counter + 1}
                {/foreach}
            </div>
        </div>
    </div>
        
</div>
<div>
</div>

<script type="text/javascript">
    (function(window){
        $(document).ready(function(){
            var baseurl = '{$baseurl}';
            var extensions = "{$extensions}";
            extensions = extensions.substring(0, extensions.length-1);
            /* files uploading */
            $.get("{$theme}/js/plupload/js/plupload.full.min.js", function(e){
                var files = [];
                var filesIndex = 0;
                var oneFileFormDiv = $("#uploadFormContainer0").clone();
                var uploader = new plupload.Uploader({
                    browse_button: 'selectFiles',
                    runtimes : 'html5,flash,silverlight,html4',
                    url : baseurl + "/actions/file_uploader.php",
                    file_data_name : "Filedata",
                    filters: {
                      mime_types : [
                        { title : "Image files", extensions : extensions },
                        { title : "Video files", extensions : extensions }
                      ]
                    }
                });
                uploader.init();
                uploader.bind('FilesAdded', function(up, uploadedFiles) {

                    for(var i = 0; i < uploadedFiles.length; i++){
                        files.push(uploadedFiles[i]);
                    }
                    //console.log(files);
                    // creating the selected files list
                    var ul = document.createElement('ul');
                    ul.id = "selectedFilesList";
                    var li = false;
                    var index = 0;
                    plupload.each(files, function(file) {
                        li = document.createElement('li');
                        if(index === 0){
                            li.className = "selectedFile btn btn-primary";
                        }else{
                            li.className = "btn btn-primary";
                        }
                        li.id = index++;
                        li.innerHTML = file.name + " (" + plupload.formatSize(file.size) + ")<b></b>";
                        ul.appendChild(li);
                    });



                    $(ul).find("li").on({
                        click: function(e){
                            e.preventDefault();
                            $(this).parent().find(".selectedFile").toggleClass('selectedFile');
                            $(this).toggleClass("selectedFile");
                            var id = $(this).attr("id");
                            $("#mainUploadContainer .selectedFileDiv").removeClass("selectedFileDiv");
                            $("#uploadFormContainer"+id)
                            .toggleClass("selectedFileDiv");
                            // .find("#title")
                            // .val(files[id].name);
                        }
                    });

                    var filesDiv = document.getElementById('files');
                    filesDiv.innerHTML = "";
                    document.getElementById('files').appendChild(ul);

                    var totalFiles = files.length;
                    
                    var oneFile = false;
                    
                    $("#uploadFormContainer"+filesIndex).addClass("selectedFileDiv").find("input[name='title']").val(files[filesIndex].name);
                    $("#uploadFormContainer"+filesIndex).find("textarea#desc").val(files[filesIndex].name);
                    $("#uploadFormContainer"+filesIndex).find("input[name='category[]']:first").attr('checked', 'checked');
                    var loop = totalFiles - uploadedFiles.length;
                    //console.log("totalFiles:"+ totalFiles + ", loop:"+loop);
                    for( var i = loop; i < totalFiles; i++ ){
                        oneFile = files[i];
                        oneFileForm = $(oneFileFormDiv).clone();//.addClass("selectedFileDiv");
                        $(oneFileForm).find("input[name='title']").val(files[i].name);
                        $(oneFileForm).find("textarea#desc").val(files[i].name);
                        $(oneFileForm).find("input[name='category[]']:first").attr('checked', 'checked');
                        if(i > 0){
                            $(oneFileForm)
                            .attr("id", "uploadFormContainer" + i)
                            .appendTo("#allUploadForms");
                            //console.log(oneFileForm);
                        }
                       
                    }

                    setTimeout(function(){
                        uploader.start();
                    }, 1000);
                    // updating file title in the form
                });

                uploader.bind("BeforeUpload", function(){
                    $("#fileUploadProgress").removeClass("hidden");
                    $(".progress-container").removeClass("hidden");
                })

                /*
                This is the event handler for UploadProgress,
                It fires regularly after a certain amount of time when the the files are being uploaded
                */

                var filesUploaded = 0;

                uploader.bind('UploadProgress', function(up, file) {
                    var progressContainer = document.getElementById("fileUploadProgress");
                    var progressBar = progressContainer.getElementsByTagName("progress")[0];
                    progressBar.style.display = "block";
                    var fileName = progressContainer.getElementsByTagName('h5')[0];
                    fileName.innerHTML = "Uploading "+file.name;
                    var percent = file.percent/100;
                    progressBar.value = percent;
                });


                /*
                This is the event handler for FileUploaded,
                it fires when the uploading of the files is completed  
                */

                var currentFileIndex = 0;

                uploader.bind('FileUploaded', function(plupload, fileDetails, response){
                    //$(".fileUploaderForm").css("display", "none");
                    $("#overallProgress").css("width", ((100/files.length)*(++filesUploaded))+"%");
                    $("#overallProgress").parents(".row").find("#uploadedFilesInfo").text("Uploaded " + (filesUploaded) + " of " + files.length);
                    var serverResponse = $.parseJSON(response.response);
                    var fileName = serverResponse.file_name;
                    var uploadForm = $("#uploadFormContainer"+currentFileIndex+" form");

                    
                    /*
                    Insert the video in the database and get the video db id from the
                    database which will be sent with the final form
                    */
                    var fileId = false;
                    $.ajax({
                        url : baseurl + "/actions/file_uploader.php",
                        type : "post",
                        data : {
                            insertVideo : "yes",
                            title : fileDetails.name,
                            file_name : fileName
                        }
                    }).success(function(msg){
                        fileId = msg;
                        
                        // creating the hidden form fields
                        var hiddenVideoIdField = document.createElement('input');
                        hiddenVideoIdField.name = 'videoid';
                        hiddenVideoIdField.type = 'hidden';
                        hiddenVideoIdField.value =  fileId;

                        var hiddenVideoNameField = document.createElement('input');
                        hiddenVideoNameField.name = 'file_name';
                        hiddenVideoNameField.type = 'hidden';
                        hiddenVideoNameField.value =  fileName;

                        var hiddenUploadVideoFlagField = document.createElement('input');
                        hiddenUploadVideoFlagField.type = 'hidden';
                        hiddenUploadVideoFlagField.name = 'updateVideo';
                        hiddenUploadVideoFlagField.value = 'yes';

                        
                        uploadForm.append(hiddenVideoIdField);
                        uploadForm.append(hiddenVideoNameField);
                        uploadForm.append(hiddenUploadVideoFlagField);
                        uploadForm.find("#cbSubmitUpload").removeAttr('disabled').val('Upload').addClass('btn-success');
                    });

                    /* 
                    Submit the form with all the video details and options 
                    to update the video information in the system
                    */
                    $("#mainUploadContainer form").on({
                        submit: function(e){
                            e.preventDefault();
                            var self = this;
                            var data = $(this).serialize();
                            $.ajax({
                                url : baseurl + "/actions/file_uploader.php",
                                type : "post",
                                data : data
                            }).success(function(msg){
                                //console.log(msg);
                                msg = $.parseJSON(msg);
                                $("#uploadMessage").removeClass("hidden");
                                if(msg.error){
                                    $("#uploadMessage").html(msg.error).attr("class", "alert alert-danger");
                                }else{
                                    $("#uploadMessage").html(msg.msg).attr("class", "alert alert-success");
                                }
                                setTimeout(function(){
                                    $("#uploadMessage").addClass("hidden");
                                }, 5000);
                            }).fail(function(err){
                                console.log(err);
                            });
                        }
                    });

                    currentFileIndex++;

                });

                uploader.bind("UploadComplete", function(plupload, files){
                    $("#fileUploadProgress").addClass("hidden");
                    uploader.refresh();
                    $("#uploadMessage").html("All Files are uploaded Successfully").attr("class", "alert alert-success");            
                    setTimeout(function(){
                        $("#uploadMessage").addClass("hidden");
                    }, 5000);
                });

                uploader.bind('Error', function(up, err) {
                    $("#uploadMessage").removeClass("hidden");
                    if(err){
                        $("#uploadMessage").html(err.message).attr("class", "alert alert-danger");
                    }
                    setTimeout(function(){
                        $("#uploadMessage").addClass("hidden");
                    }, 8000);
                    //console.log(err);
                });

                $('#uploadFiles').on({
                    click : function(e){
                        e.preventDefault();
                        $("#overallProgress").parents(".row").find("#uploadedFilesInfo").text("Uploaded " + (filesUploaded) + " of " + files.length);
                        uploader.start();
                    }
                });
            });
        });
    })(window);
</script>
<style>
    .uploadFormContainer{
        display: none;
    }

    .selectedFileDiv{
        display: block;
    }
    
    .uploadedFilesList ul{
        overflow: hidden;
    }

    .uploadedFilesList li{
    /*background-color: #CCCCCC;
    font-size: 0.9em;
    margin-right: 10px;
    padding: 6px;*/
    cursor: pointer;
    display: block;
    margin-right: 10px;
    float: left;
    width: auto;
    margin-bottom: 5px;
  }

  .uploadedFilesList li.selectedFile{
    /*background-color: #aaa;*/
    background-color: #3276B1;
  }

</style>