[FIXED] Codeignitor multiple input file upload from a dynamic form

Issue

I am having a dynamic form(drag and drop form) using Jquery which has multiple input type=file. So the name of the input type changes using a random number. Below is a sample code from view source:

<?php echo $error;?>
<?php echo form_open_multipart('upload/do_upload');?>
<form action="" enctype="multipart/form-data" method="post" accept-charset="utf-8">                            
<div id="sjfb-fields">

    <div class="my-3 p-3 bg-white rounded box-shadow">
            <div id="sjfb-399480" class="sjfb-field sjfb-images" style="min-height:100px;">
                <label for="images-399480" style="color:grey;font-size:12px">Upload the screenshot</label>

                <input type="file" name="img-399480" id="images-399480">
            </div>
    </div>

    <div class="my-3 p-3 bg-white rounded box-shadow">
        <div id="sjfb-857945" class="sjfb-field sjfb-images" style="min-height:100px;">
            <label for="images-857945" style="color:grey;font-size:12px">Test Images</label>
            <input type="file" name="img-857945" id="images-857945">
            </div>
    </div>
    <div class="my-3 p-3 bg-white rounded box-shadow">
        <div id="sjfb-792565" class="sjfb-field sjfb-images" style="min-height:100px;">
            <label for="images-792565" style="color:grey;font-size:12px">More Images</label>

            <input type="file" name="img-792565" id="images-792565">
           </div>
    </div>
</div>
<button type="submit" name="save" class="btn btn-primary">Save</button>
</form>

I have used below code in the controller for one image upload:

                    $config['upload_path']   = 'public/Uploads/Inspection/';
                    $config['allowed_types'] = 'gif|jpg|png'; 
                    $config['max_size']      = 100; 
                    $config['max_width']     = 1024; 
                    $config['max_height']    = 768; 

                    $this->load->library('upload', $config);
                    if ( ! $this->upload->do_upload('userfile')) 
                    {
                       $error = array('error' => $this->upload->display_errors()); 

                    }
                    else 
                    { 
                       $data = array('upload_data' => $this->upload->data()); 

                    }

I have tried the upload with one input type="file" and it works(used image's name userfile). This form has multiple input type=file and I was wondering is there any way I can upload the files separately? I am new to codeigniter as well

Thanks!

Solution

Check this out :

controller part :

    $files = $_FILES;  //getting the files from post
    $cpt = count($_FILES['photo']['name']); //number of files uploaded

    for($i=0;$i<$cpt;$i++){  // in loop to upload multiple files

      $file_name=$_FILES['photo']['name'][$i];

      if($i==0){     //name the file according to the number /name as u like
        echo $i;
       $name='_first';

      }elseif($i==2){

       $name='_second';  

      }else{

        $name='_third';

      }

//ci library to upload photos $this->load->library('upload');

        $_FILES['photo']['name']= $files['photo']['name'][$i];
        $_FILES['photo']['type']= $files['photo']['type'][$i];
        $_FILES['photo']['tmp_name']= $files['photo']['tmp_name'][$i];
        $_FILES['photo']['error']= $files['photo']['error'][$i];
        $_FILES['photo']['size']= $files['photo']['size'][$i];



      $config = array(
            'file_name'     => $name,
            'allowed_types' => 'jpg',    //add option as u like
            'max_size'      => 3000,
            'overwrite'     => TRUE,
            'upload_path'=>'./uploads/'      //use your respective path to upload
      );

      $this->upload->initialize($config);
   if (!$this->upload->do_upload('photo')) {
      $data_error = array('msg' => $this->upload->display_errors());

                  } else {

                      $data = $this->upload->data();

                  }

    }

And Form in html to upload Photos : input name changed to photo[] for all

<?php echo $error;?>
<?php echo form_open_multipart('upload/do_upload');?>
<form action="" enctype="multipart/form-data" method="post" accept-charset="utf-8">                            
<div id="sjfb-fields">

    <div class="my-3 p-3 bg-white rounded box-shadow">
            <div id="sjfb-399480" class="sjfb-field sjfb-images" style="min-height:100px;">
                <label for="images-399480" style="color:grey;font-size:12px">Upload the screenshot</label>

                <input type="file" name="photo[]" id="images-399480">
            </div>
    </div>

    <div class="my-3 p-3 bg-white rounded box-shadow">
        <div id="sjfb-857945" class="sjfb-field sjfb-images" style="min-height:100px;">
            <label for="images-857945" style="color:grey;font-size:12px">Test Images</label>
            <input type="file" name="photo[]" id="images-857945">
            </div>
    </div>
    <div class="my-3 p-3 bg-white rounded box-shadow">
        <div id="sjfb-792565" class="sjfb-field sjfb-images" style="min-height:100px;">
            <label for="images-792565" style="color:grey;font-size:12px">More Images</label>

            <input type="file" name="photo[]" id="images-792565">
           </div>
    </div>
</div>
<button type="submit" name="save" class="btn btn-primary">Save</button>
</form>

Working on my local see this https://www.codeigniter.com/user_guide/libraries/file_uploading.html for config option

Answered By - sumit