Codeigniter image resize before upload

Question

I am trying to upload multiple images in Codeigniter and reduce the size of each image. here is my view

 <?php echo form_open_multipart('main_controller/do_insert');?>   
    <div id="mainDiv">
     <div class='group'>
      <div><input type="text" name="name[]"/></div>
      <div><input type="file" name="img[]"/></div>
     </div>
    </div>
    <input type="button" id="add an entry">
    <input type="submit" value="save all"/>
 <?php from_close();?>

and my javascript is look like

<script>
function add(x)
{
 var str1="<div><input type='text' name='name"+x+"'/></div>"
 var str2="<div><input type='file' name='img"+x+"'/></div>"
 var str3="<input type='button' value='add an entry' onClick='add(x+1)'>";
 $("#mainDiv").append(str1+str2+str3);
}
</script>

here is my controller

 function do_insert{
    while($i<=$counter) /*conter have value of total number for images just ignore*/
    {
      $config['upload_path'] = './images/';
      $config['allowed_types'] = 'gif|jpg|png';

      $this->load->library('upload', $config);

      if ( ! $this->upload->do_upload($userfileName))
      {
         echo "error".count;    
      }
      else
      {
         $data = array('upload_data' => $this->upload->data());
         $img=$data['upload_data']['file_name']; /*for geting uploaded image name*/

         $config['image_library'] = 'gd2';
         $config['source_image'] = './images/'.$img;
         $config['new_image'] = './images/';
         $config['maintain_ratio'] = TRUE;
         $config['width']    = 640;
         $config['height']   = 480;

         $this->load->library('image_lib', $config); 

         if (!$this->image_lib->resize()) {
            echo $this->image_lib->display_errors();
         }
         else
         {
            echo "success"; /*and some code here*/
         }
       }
    }
 }

my problem is that only the first image is getting re-sized remains kept as its original size. And the image is resized after once uploaded. I think this is not a proper way now Is there any alternative way to resize the image? it may be better if resize before doing the upload.

Solution 1

I have solved the problem resizing first image by making changes in my controller as `

$this->load->library('image_lib');
while($i<=$counter) /*conter have value of total number for images just ignore*/
{
      $config['upload_path'] = './images/';
      $config['allowed_types'] = 'gif|jpg|png';
      $this->load->library('upload', $config);
      if ( ! $this->upload->do_upload($userfileName))
      {
         echo "error".count;    
      }
      else
      {
            $image_data =   $this->upload->data();

            $configer =  array(
              'image_library'   => 'gd2',
              'source_image'    =>  $image_data['full_path'],
              'maintain_ratio'  =>  TRUE,
              'width'           =>  250,
              'height'          =>  250,
            );
            $this->image_lib->clear();
            $this->image_lib->initialize($configer);
            $this->image_lib->resize();
      }
}

Solution 2

I solved image resize before upload image in codeigniter use this simple code.

image.php

<form id="thumb_form" enctype="multipart/form-data" method="post">
    <div style="margin-bottom: 5px;">
       <label>Choose Image File</label>
       <input id="image" name="image" type="file" class="form-control"/>
    </div>
    <div>
       <input type="submit" class="btn btn-primary" name="add_video" id="add_video" value="Submit">
    </div>
</form>

//ajax call write here

ajax call or script

<script>
$("form#thumb_form").submit(function(event)
{
    event.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
        url : "<?php echo site_url('Welcome/add_image_thumb');?>",
        type : "POST",
        data: formData,
        contentType: false,
        processData: false,
        dataType:"JSON",
        success : function(result)
        {
            alert(result);
        }
    });
});

Welcome.php

public  function add_image_thumb()
{
    if($_FILES['image']['name']=='')
    {
        $data['file_err']='please choose image';
    }
    else
    {
            $data = $_FILES['image']['name'];
            $config['image_library'] = 'gd2';
            $config['source_image'] = $_FILES['image']['tmp_name'];
            $config['create_thumb'] = FALSE;
            $config['maintain_ratio'] = FALSE;
            $config['width'] = 300;
            $config['height'] = 300;
            $config['new_image'] = 'asstes/thumb/' . $data;
            $this->load->library('image_lib', $config);
            $this->image_lib->resize();
            $img = '<img src="' . base_url() . 'asstes/thumb/' . $data . '">';
            echo json_encode(array('img' => $img));
    }
}

Solution 3

//Here is my upload controller and really works in local and server
//load you image_lib to your config 


 $config = array(
            'upload_path' => './upload/',
            'log_threshold' => 1,
            'allowed_types' => 'jpg|png|jpeg|gif|JPEG|JPG|PNG',
            'max_size' => 10000, 
            'max_width'=>0,
            'overwrite' => false
        );


            for($i = 1 ; $i <=8 ; $i++) {
               $upload = 'upload'.$i; //set var in upload
                if(!empty($upload)){

                    $this->load->library('upload', $config);
                    $this->upload->do_upload('upload'.$i); 
                    $upload_data = $this->upload->data();
                    $file_name = $upload_data['file_name'];
                    // process resize image before upload
                     $configer = array(
                            'image_library' => 'gd2',
                            'source_image' => $upload_data['full_path'],
                            'create_thumb' => FALSE,//tell the CI do not create thumbnail on image
                            'maintain_ratio' => TRUE,
                            'quality' => '40%', //tell CI to reduce the image quality and affect the image size
                            'width' => 640,//new size of image
                            'height' => 480,//new size of image
                        );
                    $this->image_lib->clear();
                    $this->image_lib->initialize($configer);
                    $this->image_lib->resize();

                }

        }