How to insert and move multiple image using codeig

Question

view:

<script>
    $(document).ready(function(){
        $("#submit").click(function(e){
            e.preventDefault();
            product_name = $("#product_name").val();
            color = $("#colorWell").val();
            $.ajax({
                type:"POST",
                data:{"product_name":product_name, "color":color},
                url:"<?php echo base_url(); ?>admin/products",
                success:function(data){
                    alert(data);
                }
            });
        });
    });
</script>

<input type="text" class="form-control" id="product_name" name="product_name">
<input type="color" id="colorWell" name="color">
<input type="file" id="product_image" name="product_image[]" multiple>
<input type="submit" class="btn btn-primary" id="submit" name="submit">

controller:

public function products()
{
    $product_name = $this->input->post('product_name');
    $color = $this->input->post('color');

    $dataInfo = array();
    $files = $_FILES;
    $cpt = count($_FILES['product_image']['name']);
    for($i=0; $i<$cpt; $i++)
    {           
        $_FILES['product_image']['name']= $files['product_image']['name'][$i];
        $_FILES['product_image']['type']= $files['product_image']['type'][$i];
        $_FILES['product_image']['tmp_name']= $files['product_image']['tmp_name'][$i];
        $_FILES['product_image']['error']= $files['product_image']['error'][$i];
        $_FILES['product_image']['size']= $files['product_image']['size'][$i];    

        $this->upload->initialize($this->set_upload_options());
        $this->upload->do_upload();
        $dataInfo[] = $this->upload->data();
    }
    $data = array(
            'product_name' => $product_name,
            'color' => $color,
            'product_image' => implode(",",$dataInfo['product_image']),
        );
    $result_set = $this->db->insert('add_product',$data);
    if($sql == true)
    {
        echo 'New Product Added';
    }
    else
    {
        echo 'Unable to Proceed!';
    }
}

private function set_upload_options()
{   
    $config = array();
    $config['upload_path'] = ''.base_url().'resource/product/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size']      = '0';
    $config['overwrite']     = FALSE;
    return $config;
}

In this code I am trying to insert and wants to move an image into a folder. But Now, problem is that when I click on submit button it throw an error as show in below:

Message: Undefined index: product_image

and query looks:

INSERT INTO `product` (`product_name`, `color`, `product_image`) VALUES ('men hoodies','#004080', NULL)

I don't know where am I doing wrong. So, How can I solve this issue? Please help me.

Thank You

Answer 1

use array_column like below to add get all product_image values

implode(",",array_column($dataInfo, 'product_image'))

Answer 2

Send all formdata with file in your ajax.

HTML code like this...

<form method="POST" id="YourFormID" enctype="multipart/form-data">
<input type="text" class="form-control" id="product_name" name="product_name">
<input type="color" id="colorWell" name="color">
<input type="file" id="product_image" name="product_image[]" multiple>
<input type="submit" class="btn btn-primary" id="submit" name="submit">
</form>

Ajax code here....

<script type="text/javascript">
$(document).ready(function(){
    $("#submit").click(function(e){
        e.preventDefault();
        var formData = new FormData($('form#YourFormID')[0]);
        $.ajax({
            type:"POST",
            data:formData,
            url:"<?php echo base_url(); ?>admin/products",
            success:function(data){
                alert(data);
            }
        });
    });
});
</script>

You are not send file in your ajax request. therefore not found index product_image

Answer 3

You didn't submit the files data. Use formData to upload files data, and append any other input you like to add to formData :

<script>
    $(document).ready(function(){
        $("#submit").click(function(e){
            e.preventDefault();
            product_name = $("#product_name").val();
            color = $("#colorWell").val();
            var formData = new FormData();
            $.each($("#product_image"), function (i, obj) {
                $.each(obj.files, function (j, file) {                    
                    formData.append('product_image[' + i + ']', file);
                });
            });
            formData.append('product_name', product_name);
            formData.append('color', color);
            $.ajax({
                type:"POST",
                data:formData,
                processData: false,
                contentType: false,
                url:"<?php echo base_url(); ?>admin/products",
                success:function(data){
                    alert(data);
                }
            });
        });
    });
</script>