Learn To Code

require:

codeigniter 3

demo

description:
Drag and select multi file and showing progres when upload with ajax and codeigniter

here is singgle page where load from view folder of codeigniter

<!doctype html>
<html>
<head>
    <link href="<?php echo base_url() ?>asset/bootsrap/css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="<?php echo base_url() ?>/asset/bootsrap/js/jquery.js"></script>
     <script src="<?php echo base_url() ?>asset/bootsrap/js/bootstrap.min.js"></script>
       <script src="<?php echo base_url() ?>asset/admin/bootstrap-filestyle.js"></script>
</head>
<body>
<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab">Upload</a></li>
    <li role="presentation" class="active"><a href="#galery" aria-controls="galery" role="tab" data-toggle="tab">Galery</a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in " id="upload">
 <br>
   <div id="files" class="row" rel="" >
    </div>
   <div id="holder" style="width:100%; height:200px; border: 5px dashed #ccc" id="holder">
  <div class="drag">Drag</div>
  <div class="drag or">or</div>
  <div class="drag">
   <input class="filestyle drag" type="file" id="userfile" name="userfile" multiple />
  </div>
   </div>
 </div>
    <div role="tabpanel" class="tab-pane fade in active" id="galery">..b.</div>
  </div>
</div >
</body>
</html>
 <style>
 .img-upload{
width:208px;
height:208px;
float:left;
background:#eee;
padding:5px 5px 5px 5px;
margin:3px;
 }
 .img-upload >img{
 display: block;
    display: block;
   margin: auto auto;
 
 }
 .box-opload{
 float:left;
 width:208px;
 float:left;
 margin:3px;
 }
 .progress{
 position:relative;
 top:-7px;
 width:200px;
 height:5px;
 margin-left:8px;

 }
 .progress >.progress-bar{
 height:4px;
 position:relative !important;
 bottom:0px;
 }
  #holder.hover { border: 10px dashed #0c0 !important; }
  .boxfile{
  align-items: center;
  display: flex;
  justify-content: center;
  top:50px;
  position:relative;
  height:40px;
  width:300px;
  }
  .drag{
  font-size:30px;
  color:#ccc;
   align-items: center;
  display: flex;
  justify-content: center;
  }

</style>
<script>
$(".filestyle").filestyle({input: false,buttonText: " pilih"});
var storedFiles = [];
$(document).ready(function() {
    $("#userfile").on("change", handleFileSelect); 
    var holder = document.getElementById('holder');
 holder.ondragover = function () { this.className = 'hover'; return false; };
 holder.ondragend = function () { this.className = ''; return false; };
 holder.ondrop = function (e) {
 this.className = '';
 e.preventDefault();
 var files = e.dataTransfer.files;
 var filesArr = Array.prototype.slice.call(files);
 
  aturfile(e,filesArr);
 }
    });
function aturfile(e,filesArr) {   
 var img = document.createElement("img");
 var jumlah = $("#files > .box-opload").length;
 var i  = 0+jumlah;
 filesArr.forEach(function(f) {  
  i++; 
  var html = "<div class='box-opload'><div class='img-upload' id='img"+i+"' ></div><div class='progress'><div id='p"+i+"' class='progress-bar progress-bar-striped progress-bar-info active'  role='progressbar' aria-valuenow='20' aria-valuemin='0' aria-valuemax='100' style='width: 1%;'></div></div></div>";
  
        $('#files').append(html);
   
   var ext = f.name.split('.').pop().toLowerCase();
   console.log(ext);
   
   if($.inArray(ext, ['gif','png','jpg','jpeg','rar','zip']) == -1) {
     var html = "<img id='"+i+"' src='<?php echo base_url(); ?>gambar/admin/invalid.png' data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+i).prepend(html);
      $('#p'+i).toggleClass("progress-bar-info progress-bar-danger");
       $('#p'+i+'').css("width","100%")
     return;
   }
   
            
   
   f.id = i;
            storedFiles.push(f);
   if($.inArray(ext, ['rar','zip'])>0) {
   var html = "<img id='"+i+"' src='<?php echo base_url(); ?>gambar/admin/rar.png' data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+i).prepend(html);
      $('#p'+i).attr("rel",f.name);
    $('#p'+i+'').css("width","15%")
   
   }else{
            var reader = new FileReader();
           reader.onload =gambarload.bind(reader,i,img,f);
     $('#p'+i+'').css("width","5%") 
            reader.readAsDataURL(f); 
   }
        });
  
  
  
  if($('#files').attr("rel")==="on"){}else{
   $('#files').attr("rel","on");

   submitFile(e,jumlah);
  }
  }      
 
 
function  gambarload(id,img,f,e){
  img.src = e.target.result;
        var canvas = document.createElement("canvas");
        //var canvas = $("<canvas>", {"id":"testing"})[0];
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 200;
        var MAX_HEIGHT =200;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
  $('#p'+id+'').css("width","10%")
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        var dataurl = canvas.toDataURL("image/png");
   var html = "<img id='"+id+"' src=\"" + dataurl + "\" data-file='"+f.name+"' class='selFile img-responsive' title='Click to remove'>";
               $('#img'+id).prepend(html);
      $('#p'+id).attr("rel",f.name);
    $('#p'+id+'').css("width","15%"); 

}
function submitFile(e,i){
  
   var data = new FormData();
   console.log(storedFiles[i]);
   if(!storedFiles[i]){
  $('#files').attr("rel","");
  return;
   }
   var ext = storedFiles[i].name.split('.').pop().toLowerCase();
  if($.inArray(ext, ['rar','zip'])>0){
   var formUrl = "<?php echo base_url(); ?>home/upload_file_rar/";
  }else{
   var formUrl = "<?php echo base_url(); ?>home/upload_file/";
  }
  var id= storedFiles[i].id;
        data.append('userfile', storedFiles[i]); 
        $.ajax({
                url: formUrl,
                type: 'POST',
                data: data,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
    
                success: function(data, textSatus, jqXHR){
        var data = JSON.parse(data);
      if (data["status"]=="sukses"){
        console.log(data["info"]);
       $('#p'+id).css("width","100%") ;
       var selanjutnya= i+1;
       submitFile(e,selanjutnya)
      
      }
     
     
                     
                },
                error: function(jqXHR, textStatus, errorThrown){
                        //handle here error returned
                }
        });

   
}

function handleFileSelect(e) {
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
 aturfile(e,filesArr);
}

</script>

and controller:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class home extends CI_Controller {
    public function __construct()
        {
            parent::__construct();
            $this->load->helper('url');
   $this->load->helper('link_aktif');
   $this->load->helper('show');
      $this->load->database();
   $this->load->model('tool_model');
   $this->load->helper(array('form', 'url'));
        }
 
 public function tes(){
 
 $this->load->view("tes");
 }
 
public function upload_file_rar(){
          $config['upload_path']          = './uploads/doc/';
                $config['allowed_types']        = '*';
                $config['max_size']             = 500000000000;
               
                $this->load->library('upload', $config);
                 if ( ! $this->upload->do_upload())
                {
     $error = array('error' => $this->upload->display_errors());
                    if (is_array($error)) {
      foreach ($error as $item) {
      $arr = array('info' => $this->upload->display_errors(),'status'=>"error");
      json_encode($arr);
      return  $arr;
      }
     }     
                }
                else
                {
     $image_data =$this->upload->data();
     $this->tool_model->resizes_thumb($image_data);
     $this->tool_model->resizes($image_data);
                     //echo $image_data["file_name"] ;
     $this->add_data_urut_upload("doc",$image_data["file_name"]);
     $arr = array('info' =>$image_data["file_name"],'status'=>"sukses","progress"=>"100%");
     echo  json_encode($arr);
      
                }


}
public function upload_file(){
          $config['upload_path']          = './uploads/original/';
                $config['allowed_types']        = 'gif|jpg|png|jpeg||zip|rar|';
                $config['max_size']             = 500000000000;
                $this->load->library('upload', $config);
                if ( ! $this->upload->do_upload())
                {
     $error = array('error' => $this->upload->display_errors());
                    if (is_array($error)) {
      foreach ($error as $item) {
      $arr = array('info' => $this->upload->display_errors(),'status'=>"error");
      json_encode($arr);
      return  $arr;
      }
     }     
                }
                else
                {
     $image_data =$this->upload->data();
     $this->tool_model->resizes_thumb($image_data);
     $this->tool_model->resizes($image_data);
                     //echo $image_data["file_name"] ;
     $this->add_data_urut_upload("image",$image_data["file_name"]);
     $arr = array('info' =>$image_data["file_name"],'status'=>"sukses","progress"=>"100%");
     echo  json_encode($arr);
      
                }
    

}

  
}

and the last is model

}
public function resizes_thumb($upload_data) { 
 $this->load->library('image_lib');
    $config_res['source_image'] = 'uploads/original/'.$this->upload->file_name;
    $config_res['maintain_ratio'] = TRUE;
    $config_res['width'] = 60;
    $config_res['height'] = 60;
 $config_res['create_thumb'] = true;
 $config_res['thumb_marker'] = "_thumb";
 $config_res['new_image'] = "uploads/thumb/";

    $this->image_lib->initialize($config_res);

    $this->image_lib->resize();

    $this->image_lib->clear();
 
}
public function resizes($upload_data) { 
 $this->load->library('image_lib');
    $config_res['source_image'] = 'uploads/original/'.$this->upload->file_name;
    $config_res['maintain_ratio'] = TRUE;

    $config_res['height'] = 250;
 $config_res['create_thumb'] = true;
 $config_res['thumb_marker'] = "_thumb";
 $config_res['new_image'] = "uploads/post/";

    $this->image_lib->initialize($config_res);

    $this->image_lib->resize();

    $this->image_lib->clear();
}