_dropzone.php

_dropzone.php

<div class="files" id="previews">
  <div id="template" class="vayes-file-row">
      <div class="col-xs-6 col-sm-1 col-md-1">
        <div class="vayes-vac-wrapper">
          <div class="vayes-vac-element">
            <div class="preview">
              <img class="img-responsive img-circle" data-dz-thumbnail />
            </div>
          </div>
        </div>
      </div><!-- /.col-xs-6.col-sm-1.col-md-1 -->
      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="vayes-vac-wrapper">
          <div class="vayes-vac-element">
            <p class="name" data-dz-name></p>
          </div>
        </div>
      </div><!-- /.col-xs-6.col-sm-6.col-md-3 -->
      <div class="col-xs-6 col-sm-3 col-md-2">
        <div class="vayes-vac-wrapper">
          <div class="vayes-vac-element">
            <p class="size" data-dz-size></p>
          </div>
        </div>
      </div><!-- /.col-xs-6.col-sm-3.col-md-2 -->
      <div class="col-xs-6 col-sm-6 col-md-3">
        <div class="vayes-vac-wrapper">
          <div class="vayes-vac-element">
            <p class="vfm-dropzone-response-error"></p>
            <p class="vfm-dropzone-response-success"></p>
          </div>
        </div>
      </div><!-- /.col-xs-6.col-sm-6.col-md-3 -->
      <div class="col-xs-12 col-sm-3 col-md-3">
        <div class="vayes-vac-wrapper">
          <div class="vayes-vac-element">
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
            </div>
          </div>
        </div>
      </div><!-- /.col-xs-12.col-sm-3.col-md-3 -->
    <?=clearfix(1);?>
  </div><!-- /#template -->
</div><!-- /#previews.files -->

<script type="text/javascript">
  var maxfilesexceeded_monitor = false;
  var previewNode = document.querySelector("#template");
  previewNode.id = "";
  var previewTemplate = previewNode.parentNode.innerHTML;
  previewNode.parentNode.removeChild(previewNode);

  Dropzone.autoDiscover = false;
  Dropzone.options.myDropzone = false;
  Dropzone.autoProcessQueue = true;

  var error_occured = false;
  var delay_refresh_duration = 4000;
  var delay_reset_duration = 5000;

  var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    paramName:"userfile",
    url:"<?=base_url('app/vayes_file_manager/uploading');?>", // Set the url
    createImageThumbnails: true,
    thumbnailWidth:40,
    thumbnailHeight:40,
    parallelUploads:1,
    maxFiles:<?=$upl_per_request;?>,
    previewTemplate:previewTemplate,
    autoQueue:true,
    previewsContainer:"#previews",
    clickable:".fileinput-button",
    addRemoveLinks:false,
    init:function(){
      this.on("error",function(file,response,xhr){
        //console.log(file);console.log(response);console.log(xhr);
        error_occured = true;
        var $row = $(file.previewTemplate);
        $row.find('p.vfm-dropzone-response-error').text(response.message);
      });
      this.on("success",function(file, response) {
        var $row = $(file.previewTemplate);
        $row.addClass('VayesWeb');
        $row.find('p.name').text(response.upl_name).css('color','green').css('font-weight','600');
        $row.find('p.vfm-dropzone-response-success').text(response.message);
      });
    },
    sending:function(file,xhr,formData) {
        $('.statusContainer').css('visibility','visible');
        if(getURLParameter('mode')) {
          formData.append("mode",getURLParameter('mode'));
        }
        formData.append("<?=$this->security->get_csrf_token_name();?>", "<?=$this->security->get_csrf_hash();?>");
    }
  });

  myDropzone.on("maxfilesexceeded",function(file){maxfilesexceeded_monitor=true;this.removeFile(file);});
  myDropzone.on("addedfile",function(file){$('#fnf-layer').children('.slimScrollDiv').hide();});

  myDropzone.on("complete",function(file){
    if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0){
      if(error_occured) {delay_refresh_duration=7000;delay_reset_duration=8000}
      setTimeout(function(){$('#previews').slideUp();refresh_browse();},delay_refresh_duration);
      setTimeout(function(){myDropzone.removeAllFiles(true); $('#previews').show();$(window).scroll();if(error_occured){delay_refresh_duration=2000;delay_reset_duration=3000;error_occured=false;}},delay_reset_duration);
      // Handle maxfilesexceeded_monitor
      if(maxfilesexceeded_monitor){
        <?php if ($this->app_language == 'tr_TR'):?>
        Interact.show('Tek seferde ortam yükleme limitiniz <?=$upl_per_request;?> adettir.<br>Seçtiğiniz ortamlardan sadece ilk <?=$upl_per_request;?> ortam yüklenmiştir.');
        <?php else:?>
        Interact.show('You are allowed to upload <?=$upl_per_request;?> media per request.<br>Only the first <?=$upl_per_request;?> media is uploaded from your selection range.');
        <?php endif;?>
        maxfilesexceeded_monitor = false;
      }
    }
  });

  var amaran_message = '<div class="media"><div class="pull-left"><?=fa_icon("info", "2x");?></div><div class="media-body"><?=lang("vfm_notification_drag_and_drop_uploads");?></div></div>';
 //  $.amaran({content:{message:amaran_message,bgcolor:'rgba(120,81,169,1.0)',color:'rgba(255,255,255,1)'},theme:'colorful',position:'bottom right',inEffect:'slideBottom',outEffect:'fadeOut',delay:5000,closeOnClick:true});

  $(document).ready(function(){

  });
</script>