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

<div class="container">
   <div class="upload_info">
   {if $step == 1 || $step == ""}
   <div id="uploadMessage" class=""></div>
   <div class="container cb-box manageCollection">
      {if $c}
          {if $cbphoto->is_addable($c)}
              <div class="photoBox">
                  <div>You are about to add new photos in <strong>{$c.collection_name}</strong></div>
                  <div>
                      <div class="moveL">
                          <img src="{$cbcollection->get_thumb($c,'small',TRUE)}" />
                      </div>
                      <div class="moveL">
                          <div class="photoTitle">
                              <a href="{$cbcollection->collection_links($c,'view')}">
                                  {$c.collection_name}
                              </a>
                          </div>
                          <div>
                              Total Items: {$c.total_objects}
                              Views: {$c.views|number_format}
                              Date Added: {$c.date_added|niceTime}
                          </div>
                      </div>
              </div>
              </div>
          {else}
              <div class="photoBox">
                  <div>You can not add new photos in collection because of following reasons:</div>
                  <div>
                      <li>Collection does not exist.</li>
                      <li>It is unactive.</li>
                      <li>It is private.</li>
                      <li>Your are not owner of collection.</li>
                      <li>You can select collection once your photos have been uploaded.</li>
                  </div>            
              </div> 
          {/if}
      {else}
            <div class="row">
              <div class="col-md-4 text-center">
                 <!-- <a href="#" class="btn btn-primary">
                    Select Collection
                 </a> -->
                 <a href="#" class="btn btn-success" id="createNewCollection">
                    Create New Collection
                 </a>
              </div> 
              <div id="SelectionDIV" class="col-md-7">
                 {if $collections}
                 <div class="form-group">
                     <label>Select Collection</label>
                     <select class="form-control" id="collectionSelection" name="collectionSelection">
                             {foreach from=$collections item=item}
                                 <option value="{$item.collection_id}">{$item.collection_name}</option>
                             {/foreach}
                     </select>
                 </div>
                 {else}
                    <p class="alert alert-warning">No Collection Found</p>
                    <div class="form-group">
                       <label>Select Collection</label>
                       <select class="form-control" id="collectionSelection" name="collectionSelection">
                          <option value="0">no collection found</option>
                       </select>
                   </div>
                 {/if}
              </div>
            </div>
            <hr>

            <div id="CollectionDIV" style="display:none">
              <form action="#" type="post">
                <h3>Create New Collection</h3>
                {assign var='reqFields' value=$cbcollection->load_required_fields()}    
                {foreach from=$reqFields item=field}
                {if $field.id != 'type'}
                  <div class="form-group">
                     <label for="{$field.id}">{$field.title}</label>
                     {$field.class = 'form-control'}
                     {if $field.type == 'checkbox'}
                     {$field.label_class = 'checkbox'}
                     {/if}
                     {$formObj->createField($field)}
                  </div>
                {/if}
                {/foreach}
                <div class="moveR">
                  <button type="button" id="addNewCollection" class="btn btn-success">
                     Add Collection
                  </button>
                </div>
              </form>
            </div>
      {/if}
   </div>

  <div class="cb-box progress-container overallProgressContainer">    
           <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>


   <div class="container uploadVideos">


       <div class="cb-box" id="mainUploadContainer">
           <h2>Select Photo Files</h2>
           <div class="pad-bottom video-info-container">
               <ul class="nav nav-tabs">
                   <li class="active"><a href="#file-upload" data-toggle="tab">Photo Upload</a></li>
                   <li><a href="#remote-upload" data-toggle="tab">Remote Upload</a></li>
                   <li><a href="#embed-code" data-toggle="tab">Embed Code</a></li>
               </ul>
               <div class="tab-content uploadFormDiv">
                   <div class="tab-pane fade in active clearfix" id="file-upload">
                       <div class="">
                           <div class="createCollection">
                               
                           </div>
                           <div class="upload-area col-md-12">
                               <div class="fileUploaderForm">
                                   <div class="instructions alert alert-info">
                                       {lang code='upload_right_guide_photo'}
                                   </div>

                                   <a id="selectFiles" href="javascript:;" class="btn btn-primary">
                                       Select Files
                                   </a>
                                   <a id="uploadFiles" class="btn btn-success" href="javascript:;">
                                       Upload
                                   </a>
                                   <div id="fileUploadProgress">
                                       <h5></h5>
                                       <progress value="0" style="display:none"></progress>
                                   </div>
                                   <div id="selectedFiles" class="uploadedFilesList">
                                       <h4>Selected Files</h4>
                                       <div id="files">
                                           <ul>
                                               <li>no files selected</li>
                                           </ul>
                                       </div>
                                   </div>
                               </div>
                           </div>   
                       </div>
                       <div id="allUploadForms">
                         {include file="$style_dir/blocks/upload/photo_form.html" }
                       </div>
                       </div>
                   </div>
                   <div class="tab-pane fade" id="remote-upload">remote upload</div>
                   <div class="tab-pane fade" id="embed-code">embed code</div>
               </div>
           </div>
       </div>     
   </div>

   <script type="text/javascript">
       (function(window){
           $(document).ready(function(){
               var baseurl = '{$baseurl}';
               var photo_extensions = '{","|implode:$cbphoto->exts}';

               /* 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/photo_uploader.php",
                       file_data_name : "photoUpload",
                       filters: {
                         mime_types : [
                           { title : "Image files", extensions : photo_extensions },
                         ]
                       }
                   });
                   uploader.init();
                   uploader.bind('FilesAdded', function(up, uploadedFiles) {

                       for(var i = 0; i < uploadedFiles.length; i++){
                           files.push(uploadedFiles[i]);
                       }
                       // 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";
                           }
                           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("#photo_title, #photo_description").val(files[filesIndex].name);
                       var loop = totalFiles - uploadedFiles.length;
                       for( var i = loop; i < totalFiles; i++ ){
                           oneFile = files[i];
                           oneFileForm = $(oneFileFormDiv).clone();//.addClass("selectedFileDiv");
                           if(i > 0){
                               $(oneFileForm)
                               .attr("id", "uploadFormContainer" + i)
                               .appendTo("#allUploadForms");
                           }
                       }
                       $("#allUploadForms form").each(function(index, value){
                        $(value).find("#title").val(files[index].name);
                       })

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

                   uploader.bind("BeforeUpload", function(){
                       $("#fileUploadProgress").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){
                       $("#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;
                       var fileIndex = 0;
                       for(var i = 0; i < files.length; i++){
                        if(files[i] === fileDetails){
                          fileIndex = i;
                          break;
                        }
                       }
                       var data = $("#allUploadForms #uploadFormContainer"+fileIndex+ " form")
                       .serialize();
                       data += "&insertPhoto=yes";
                       data += "&filename="+serverResponse.filename;
                       data += "&ext="+serverResponse.extension;
                       $.ajax({
                           url : baseurl + "/actions/photo_uploader.php",
                           type : "post",
                           data : data
                       }).success(function(msg){
                           msg = $.parseJSON(msg);
                           //creating the hidden form fields
                          $("#allUploadForms #uploadFormContainer"+fileIndex+ " form img").attr("src", msg.photoPreview);
                          $("#allUploadForms #uploadFormContainer"+fileIndex+ " form .submitPhoto").removeAttr("disabled");
                           var hiddenPhotoIdField = document.createElement('input');
                           hiddenPhotoIdField.name = 'photo_id';
                           hiddenPhotoIdField.type = 'hidden';
                           hiddenPhotoIdField.value =  msg.photoID;

                           uploadForm.append(hiddenPhotoIdField);
                       });

                       /* 
                       Submit the form with all the video details and options 
                       to update the video information in the system
                       */

                       $("#allUploadForms form").on({
                           submit: function(e){
                               e.preventDefault();
                               var collectionId = $("#SelectionDIV select").val();
                               var self = this;
                               var data = $(this).serialize();
                               data += "&collection_id="+collectionId;
                               data += "&server_url=undefined&folder=undefined";
                               $.ajax({
                                   url : baseurl + "/actions/photo_uploader.php",
                                   type : "post",
                                   data : data
                                }).success(function(msg){
                                  $("#uploadMessage").removeClass("hidden");
                                  $("#uploadMessage").html("Picture details are successfully updated").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();
                   });

                   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);
                   });

                   $('#uploadFiles').on({
                       click : function(e){
                           e.preventDefault();
                           $("#overallProgress").parents(".row").find("#uploadedFilesInfo").text("Uploaded " + (filesUploaded) + " of " + files.length);
                           uploader.start();
                       }
                   });

                   $("#addNewCollection").on({
                    click: function(e){
                      e.preventDefault();
                      var formData = $(this).parents("form").serialize();
                      formData += "&mode=add_collection";
                      var collectionName = $(this).parents("form").find("#collection_name").val();
                      $.ajax({
                        type: "post",
                        url: baseurl + "/ajax.php",
                        data: formData,
                      }).success(function(msg){
                        msg = $.parseJSON(msg);
                        if(msg.err === null){
                          var newCollectionElement = document.createElement('option');
                          newCollectionElement.value = parseInt(msg.id);
                          newCollectionElement.innerHTML = collectionName;
                          newCollectionElement.selected = true;
                          $("#collectionSelection").get(0).appendChild(newCollectionElement);
                          $("#CollectionDIV").toggle("slow");
                          $("#uploadMessage").html(msg.msg).attr("class", "alert alert-success").removeClass("hidden");
                          setTimeout(function(){
                            $("#uploadMessage").addClass("hidden");
                          }, 5000);
                        }else{
                          $("#uploadMessage").html(msg.err).attr("class", "alert alert-danger").removeClass("hidden");
                          setTimeout(function(){
                            $("#uploadMessage").addClass("hidden");
                          }, 5000);
                        }
                      });
                    }
                   });
                    
                    $("#createNewCollection").on({
                      click: function(e){
                        e.preventDefault();
                        $("#CollectionDIV").toggle("slow");
                      }
                    });

                    $("#SelectionDIV select").on({
                      change: function(e){
                        var collectionField = $("#collectionId");
                        if(collectionField){
                          $(collectionField).val(this.value);
                        }else{
                          var newField = document.createElement("input");
                          newField.type = "hidden";
                          newField.name = "collection_id";
                          newField.value = this.value;
                          $("#allUploadForms form").each(function(index, value){
                            $(value).get(0).appendChild(newField);
                          });
                        }
                      }
                    });
                    
               });
           });
       })(window);
   </script>

    {/if}

    {if $step == 2}
    	<h2>Enter Information</h2>
    	{foreach item=item from=$photos}
    		{include file="$style_dir/blocks/upload/photo_form.html" photo=$item}
        {/foreach}
        <button class="LoadMoreButton clearfix" onclick="callAjax(this);" type="button" name="insertPhotos" id="insertPhotos">Save All</button>
    {/if}

    {if $step == 3}
    	<div class="photoBox">
        	<div style="background:#FFF; text-align:center; border-bottom:1px solid #ccc; color:#666; padding:8px; font:bold 14px Arial;">{lang code="photo_success_heading"}</div>
            
            <div class="clearfix" style="padding:8px; font:normal 11px Tahoma;">
            	You can manage your photos from <strong><a href="{link name='manage_photos'}">{lang code='manage_photos'}</a></strong>.
            </div>
        </div>
    {/if}     
    </div> 
</div>

{AD place='ad_300x250'}