Insert and move multiple images via jQuery AJAX in

Question

This question already has an answer here:

• How to insert and move multiple image using codeigniter? 3 answers

view:

$("#submit").on('click',function(e){
    e.preventDefault();
    product_name = $("#product_name").val();
    category = $("#category").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('category', category);
    $.ajax({
        type:"POST",
        data:formData,
        processData: false,
        contentType: false,
        url:"<?php echo base_url(); ?>admin/products",
        success:function(data){
            alert(data);
        }
    });
});

Controller:

public function products()
{
    $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' => $this->input->post('product_name'),
            'category' => $this->input->post('category'),
            'product_image' => implode(",",array_column($dataInfo, 'product_image'))
        );
    $sql = $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;
}

I have three input field i.e. product_name,category and product_image. Now, I wants to move multiple images and insert product_image name which is separated by comma(,) for example img1.jpg,img2.jpg,img3.jpg like that. Now, when I alert reponse it show nothing. So, How can I solve ? Please help me.

expected output demo of mysql like

product_name    category    product_images
============    ========    ==============
men t-shirt     MEN         img1.jp,img2.jpg,img3.jpg
kids t-shirt    kids        img1.jp,img2.jpg,img3.jpg

Answer 1

Ok here a complete answer from A to Z of how to upload multiple files using ajax, first of all in the view, you can put as many file inputs as you want but as an array of course like this:

<form enctype="multipart/form-data" action="<?php echo base_url('') ?>" method="post">
    <input name="files[]" type="file" />
    <input name="files[]" type="file" />
    <input type="button" value="Upload" id="upload"/>
</form>

Then your ajax like this, no overhead whatsoever, just a normal submission:

$('#upload').click(function(e) {
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);
    $.ajax({
        url: "<?php echo base_url() ?>",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {

        },
        error: function(response) {

        }
    });
});

But this code will pass $_FILES like this:

array(1) {
    ["files"]=>
    array(5) {
        ["name"]=>
        array(2) {
            [0]=>
            string(10) "imgOne.jpg"
            [1]=>
            string(31) "imgTwo.png"
        }
        ["type"]=>
        array(2) {
            [0]=>
            string(10) "image/jpeg"
            [1]=>
            string(9) "image/png"
        }
        ["tmp_name"]=>
        array(2) {
            [0]=>
            string(24) "C:\xampp\tmp\phpF867.tmp"
            [1]=>
            string(24) "C:\xampp\tmp\phpF878.tmp"
        }
        ["error"]=>
        array(2) {
            [0]=>
            int(0)
            [1]=>
            int(0)
        }
        ["size"]=>
        array(2) {
            [0]=>
            int(358419)
            [1]=>
            int(72657)
        }
    }
}

And that's the problem, so we have to rearrange this array in your controller's method like this:

$files = array();
foreach ($_FILES['files'] as $property => $array)
{
    foreach ($array as $key => $value)
    {
        $files[$key][$property] = $value;
    }
}

And this will give you a proper array like this:

array(2) {
    [0]=>
    array(5) {
        ["name"]=>
        string(10) "imgOne.jpg"
        ["type"]=>
        string(10) "image/jpeg"
        ["tmp_name"]=>
        string(24) "C:\xampp\tmp\phpF867.tmp"
        ["error"]=>
        int(0)
        ["size"]=>
        int(358419)
    }
    [1]=>
    array(5) {
        ["name"]=>
        string(31) "imgTwo.png"
        ["type"]=>
        string(9) "image/png"
        ["tmp_name"]=>
        string(24) "C:\xampp\tmp\phpF878.tmp"
        ["error"]=>
        int(0)
        ["size"]=>
        int(72657)
    }
}

Now you can loop through this array and do_upload with CodeIgniter, but first lets reinitialize our $_FILES with the new array and then load upload library with our configs and loop through it like this:

$_FILES = $files;
$config['upload_path'] = FCPATH.'uploads/';
$config['allowed_types'] = 'gif|jpg|jpeg|png';
$config['max_size'] = '2048';
$this->load->library('upload', $config);
foreach ($_FILES as $fieldname => $fileobject)
{
    if (!empty($fileobject['name']))
    {
        $this->upload->initialize($config);
        if (!$this->upload->do_upload($fieldname))
        {
            $errors[$fileobject['name']] = $this->upload->display_errors();
        }
        else
        {
            $success[$fileobject['name']] = 'Success';
        }
    }
}

And that's it.

Answer 2

Maybe your ajax request is not success at all. I mean there are some errors in the middle process of uploading the image. Try add error option on your ajax declaration.

$.ajax({
    type:"POST",
    data:formData,
    url:"<?php echo base_url(); ?>admin/products",
    success: function(response) { // <-- will called if http response is 200
        //console.log(response);
        alert(response);
    },
    error: function(response) {  // <-- will called if any error in server. http response: 400, 500, etc
        //console.error(response);
        alert(response);
    }

});

Don't forget to enable your php error reporting and also checking the php error log will give you more information