How to insert and move multiple image using codeigniter? - php

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

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 2

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>

Answer 3

use array_column like below to add get all product_image values
implode(",",array_column($dataInfo, 'product_image'))